From ebdbe7c27962c45cd3410bd804bd5cca153aafbc Mon Sep 17 00:00:00 2001
From: Samuel Meuli <me@samuelmeuli.com>
Date: Thu, 23 Apr 2020 12:56:09 +0200
Subject: [PATCH] Make `activeFontFamily` and `onChange` props optional

For consistency with the `font-picker` package.
---
 README.md          | 4 ++--
 src/FontPicker.tsx | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 83f3bf1..237cd1e 100644
--- a/README.md
+++ b/README.md
@@ -73,8 +73,8 @@ When the user selects a font, it will automatically be downloaded and applied to
 The following props can be passed to the `FontPicker` component:
 
 - **`apiKey` (required)**: Google API key
-- **`activeFontFamily` (required)**: Font that should be selected in the font picker and applied to the text. Should be stored in the component state and updated using `onChange`
-- **`onChange` (required)**: Function which is executed when the user changes the active font. This function should update `activeFontFamily` in the component state
+- **`activeFontFamily`**: Font that should be selected in the font picker and applied to the text. Should be stored in the component state and updated using `onChange`
+- **`onChange`**: Function which is executed when the user changes the active font. This function should update `activeFontFamily` in the component state
 - **`pickerId`**: If you have multiple font pickers on your site, you need to give them unique IDs which must be provided as a prop and appended to the `.apply-font` class names. Example: If `pickerId="main"`, use `className="apply-font-main"`
 - **`families`**: If only specific fonts shall appear in the list, specify their names in an array. Default: All font families
 - **`categories`**: Array of font categories to include in the list. Possible values: `"sans-serif", "serif", "display", "handwriting", "monospace"`. Default: All categories
diff --git a/src/FontPicker.tsx b/src/FontPicker.tsx
index 614b55f..9896bea 100644
--- a/src/FontPicker.tsx
+++ b/src/FontPicker.tsx
@@ -16,10 +16,10 @@ type LoadingStatus = "loading" | "finished" | "error";
 interface Props {
 	// Required props
 	apiKey: string;
-	activeFontFamily: string;
-	onChange: (font: Font) => void;
 
 	// Optional props
+	activeFontFamily: string;
+	onChange: (font: Font) => void;
 	pickerId: string;
 	families: string[];
 	categories: Category[];
@@ -47,7 +47,8 @@ export default class FontPicker extends PureComponent<Props, State> {
 	fontManager: FontManager;
 
 	static defaultProps = {
-		defaultFamily: FONT_FAMILY_DEFAULT,
+		activeFontFamily: FONT_FAMILY_DEFAULT,
+		onChange: (): void => {}, // eslint-disable-line @typescript-eslint/no-empty-function
 		pickerId: OPTIONS_DEFAULTS.pickerId,
 		families: OPTIONS_DEFAULTS.families,
 		categories: OPTIONS_DEFAULTS.categories,
@@ -56,8 +57,6 @@ export default class FontPicker extends PureComponent<Props, State> {
 		filter: OPTIONS_DEFAULTS.filter,
 		limit: OPTIONS_DEFAULTS.limit,
 		sort: OPTIONS_DEFAULTS.sort,
-		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		onChange: (): void => {},
 	};
 
 	state: Readonly<State> = {