font-picker-react - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

lib/FontPicker.es.js

@@ -0,4 +1,5 @@
+import { FontManager } from 'font-picker';
+import throttle from 'lodash.throttle';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import throttle from 'lodash.throttle';
-import { FontManager } from 'font-picker';
 
@@ -74,2 +75,15 @@ function _classCallCheck(instance, Constructor) {
 
+var propTypes = {
+  apiKey: PropTypes.string.isRequired,
+  activeFont: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.shape({
+    name: PropTypes.string,
+    families: PropTypes.arrayOf(PropTypes.string),
+    categories: PropTypes.arrayOf(PropTypes.string),
+    variants: PropTypes.arrayOf(PropTypes.string),
+    limit: PropTypes.number,
+    sort: PropTypes.oneOf(['alphabetical', 'popularity'])
+  })
+};
 var THROTTLE_INTERVAL = 250;
@@ -288,3 +302,4 @@ /**
 }(Component);
+FontPicker.propTypes = propTypes;
 
 export default FontPicker;

lib/FontPicker.js

@@ -5,6 +5,7 @@ 'use strict';
 
+var fontPicker = require('font-picker');
+var throttle = _interopDefault(require('lodash.throttle'));
+var PropTypes = _interopDefault(require('prop-types'));
 var React = require('react');
 var React__default = _interopDefault(React);
-var throttle = _interopDefault(require('lodash.throttle'));
-var fontPicker = require('font-picker');
 
@@ -80,2 +81,15 @@ function _classCallCheck(instance, Constructor) {
 
+var propTypes = {
+  apiKey: PropTypes.string.isRequired,
+  activeFont: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.shape({
+    name: PropTypes.string,
+    families: PropTypes.arrayOf(PropTypes.string),
+    categories: PropTypes.arrayOf(PropTypes.string),
+    variants: PropTypes.arrayOf(PropTypes.string),
+    limit: PropTypes.number,
+    sort: PropTypes.oneOf(['alphabetical', 'popularity'])
+  })
+};
 var THROTTLE_INTERVAL = 250;
@@ -294,3 +308,4 @@ /**
 }(React.Component);
+FontPicker.propTypes = propTypes;
 
 module.exports = FontPicker;

package.json

 {
 	"name": "font-picker-react",
-	"version": "2.2.1",
+	"version": "2.3.0",
 	"description": "Font selector component for Google Fonts",
@@ -29,10 +29,13 @@ "keywords": [
 		"build:rollup": "rollup --config",
-		"lint": "eslint ."
+		"format:any": "prettier --print-width 100 --write",
+		"format:js": "prettier --print-width 100 --single-quote --write",
+		"lint": "eslint --fix"
 	},
 	"dependencies": {
 		"font-picker": "^2.1.0",
-		"lodash.throttle": "^4.1.1"
+		"lodash.throttle": "^4.1.1",
+		"prop-types": "^15.6.2"
 	},
 	"peerDependencies": {
-		"react": "^16.3.1"
+		"react": "^16.0.0"
 	},
@@ -43,2 +46,3 @@ "devDependencies": {
 		"@babel/preset-react": "^7.0.0",
+		"@samuelmeuli/eslint-config": "~1.1.0",
 		"@storybook/react": "^4.0.6",
@@ -48,2 +52,3 @@ "babel-loader": "^8.0.4",
 		"eslint-config-airbnb": "^16.1.0",
+		"eslint-config-prettier": "^4.0.0",
 		"eslint-plugin-import": "^2.14.0",
@@ -53,5 +58,7 @@ "eslint-plugin-jsx-a11y": "^6.1.1",
 		"husky": "^1.1.4",
+		"lint-staged": "^8.1.3",
 		"npm-run-all": "^4.1.3",
-		"react": "^16.4.2",
-		"react-dom": "^16.4.2",
+		"prettier": "^1.16.4",
+		"react": "^16.8.0",
+		"react-dom": "^16.8.0",
 		"rollup": "^1.1.0",
@@ -65,6 +72,16 @@ "rollup-plugin-babel": "^4.0.3"
 		"hooks": {
-			"pre-commit": "yarn lint",
-			"pre-push": "yarn lint"
+			"pre-commit": "lint-staged"
 		}
+	},
+	"lint-staged": {
+		"*.js": [
+			"yarn lint",
+			"yarn format:js",
+			"git add"
+		],
+		"*.{css,json,md,yml}": [
+			"yarn format:any",
+			"git add"
+		]
 	}
 }

README.md

@@ -5,5 +5,5 @@ # Font Picker for React
 
-* Simple setup
-* Automatic font download and generation of the required CSS styles
-* Efficient font previews (previews are loaded dynamically and full fonts are only downloaded on selection)
+- Simple setup
+- Automatic font download and generation of the required CSS styles
+- Efficient font previews (previews are loaded dynamically and full fonts are only downloaded on selection)
 
@@ -18,3 +18,2 @@ → **[Demo](https://samuelmeuli.github.io/font-picker)**
 
-
 ## Getting started
@@ -30,3 +29,2 @@
 
-
 ### 2. Displaying the font picker
@@ -37,4 +35,4 @@
 ```jsx
-import React, { Component } from 'react';
-import FontPicker from 'font-picker-react';
+import React, { Component } from "react";
+import FontPicker from "font-picker-react";
 
@@ -44,3 +42,3 @@ export default class ExampleComponent extends Component {
     super();
-    this.state = { activeFont: 'Open Sans' };
+    this.state = { activeFont: "Open Sans" };
   }
@@ -56,5 +54,3 @@
         />
-        <p className="apply-font">
-          The font will be applied to this text.
-        </p>
+        <p className="apply-font">The font will be applied to this text.</p>
       </div>
@@ -66,3 +62,2 @@ );
 
-
 ### 3. Applying the selected font
@@ -74,3 +69,2 @@
 
-
 ## Customization
@@ -80,14 +74,13 @@
 
-* **`apiKey` (required)**: Google API key (can be generated [here](https://developers.google.com/fonts/docs/developer_api#APIKey))
-* **`defaultFont`**: Font that is selected on initialization (default: `'Open Sans'`)
-* **`options`**: Object with additional optional parameters:
-  * **`name`**: If you have multiple font pickers on your site, you need to give them unique names (which may only consist of letters and digits). These names must also be appended to the font picker's ID and the `.apply-font` class name. Example: If `options = { name: 'main' }`, use `#font-picker-main` and `.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 – possible values: `'sans-serif', 'serif', 'display', handwriting', 'monospace'` (default: all categories)
-  * **`variants`**: Array of variants which the fonts must include and which will be downloaded; the first variant in the array will become the default variant and will be used in the font picker and the `.apply-font` class. Example: `['regular', 'italic', '700', '700italic']` (default: `['regular']`)
-  * **`limit`**: Maximum number of fonts to be displayed in the list (the least popular fonts will be omitted; default: `100`)
-  * **`sort`**: Sorting attribute for the font list – possible values: `'alphabetical'` (default), `'popularity'`
-* **`onChange`**: Function which is executed when the user changes the active font and its stylesheet has finished downloading
+- **`apiKey` (required)**: Google API key (can be generated [here](https://developers.google.com/fonts/docs/developer_api#APIKey))
+- **`activeFont` (required)**: Font that should be selected in the font picker and applied to the text. Must be stored in state and updated using `onChange`
+- **`onChange` (required)**: Function which is executed when the user changes the active font and its stylesheet has finished downloading. This function should update the `activeFont` in the state
+- **`options`**: Object with additional optional parameters:
+  - **`name`**: If you have multiple font pickers on your site, you need to give them unique names (which may only consist of letters and digits). These names must also be appended to the font picker's ID and the `.apply-font` class name. Example: If `options = { name: 'main' }`, use `#font-picker-main` and `.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 – possible values: `'sans-serif', 'serif', 'display', handwriting', 'monospace'` (default: all categories)
+  - **`variants`**: Array of variants which the fonts must include and which will be downloaded; the first variant in the array will become the default variant and will be used in the font picker and the `.apply-font` class. Example: `['regular', 'italic', '700', '700italic']` (default: `['regular']`)
+  - **`limit`**: Maximum number of fonts to be displayed in the list (the least popular fonts will be omitted; default: `100`)
+  - **`sort`**: Sorting attribute for the font list – possible values: `'alphabetical'` (default), `'popularity'`
 
-
 ## Development
@@ -97,6 +90,6 @@
 
-* `git clone`
-* `yarn install`
-* `yarn start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and and start the [Storybook](https://github.com/storybooks/storybook) for testing the component interactively (`localhost:3000`)
+- `git clone`
+- `yarn install`
+- `yarn start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and and start the [Storybook](https://github.com/storybooks/storybook) for testing the component interactively (`localhost:3000`)
 
 Suggestions and contributions are always welcome! Please first discuss changes via issue before submitting a pull request.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25616

increased by6.58%

Lines of code

517

increased by6.16%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

20

increased by25%

Number of lines in readme file

86

decreased by-7.53%

Dependency changes

• + Addedprop-types@^15.6.2