{"_id":"@arunmurugan/font-picker-react","_rev":"2-974945a38b87800a8c024aa549a4bb33","name":"@arunmurugan/font-picker-react","dist-tags":{"latest":"3.6.3"},"versions":{"3.6.2":{"name":"@arunmurugan/font-picker-react","version":"3.6.2","description":"Font selector component for Google Fonts","author":{"name":"Samuel Meuli","email":"me@samuelmeuli.com","url":"https://samuelmeuli.com"},"repository":{"type":"git","url":"git+https://github.com/samuelmeuli/font-picker-react.git"},"homepage":"https://font-picker.samuelmeuli.com","license":"MIT","keywords":["fonts","google fonts","selector","picker","component","preview","download","react","react-component"],"main":"./dist/FontPicker.js","module":"./dist/FontPicker.es.js","types":"./dist/FontPicker.d.ts","scripts":{"start":"npm-run-all build:clean build:ts --parallel start:*","start:ts":"rollup --config --sourcemap --watch","start:storybook":"start-storybook --port 3000","build":"run-s build:*","build:clean":"rm -rf ./dist/ && mkdir ./dist/","build:ts":"rollup --config","test":"tsc --noEmit","lint:css":"stylelint --ignore-path ./.gitignore --max-warnings 0 \"**/*.{css,sass,scss}\"","lint:css:fix":"yarn lint:css --fix","lint:ts":"eslint --ext .ts,.tsx --ignore-path ./.gitignore --max-warnings 0 \"**/*.{ts,tsx}\"","lint:ts:fix":"yarn lint:ts --fix","format":"prettier --ignore-path ./.gitignore --list-different \"**/*.{css,html,js,json,jsx,less,md,scss,ts,tsx,vue,yaml,yml}\"","format:fix":"yarn format --write","version":"yarn build","release":"np"},"dependencies":{"@samuelmeuli/font-manager":"^1.4.0"},"peerDependencies":{"@types/react":"^16.0.0","react":"^16.0.0"},"devDependencies":{"@babel/core":"^7.9.0","@samuelmeuli/eslint-config":"^6.0.0","@samuelmeuli/prettier-config":"^2.0.1","@samuelmeuli/stylelint-config":"^3.0.0","@samuelmeuli/tsconfig":"^1.0.0","@storybook/react":"^5.3.18","@types/react":"^16.9.34","@typescript-eslint/eslint-plugin":"^2.29.0","@typescript-eslint/parser":"^2.29.0","babel-loader":"^8.1.0","eslint":"6.8.0","eslint-config-airbnb":"18.1.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.20.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^2.5.1","np":"^6.2.2","npm-run-all":"^4.1.3","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup":"^1.32.1","rollup-plugin-typescript2":"^0.27.0","stylelint":"^12.0.1","typescript":"^3.8.3"},"browserslist":["defaults"],"eslintConfig":{"root":true,"extends":"@samuelmeuli/eslint-config/typescript-react","env":{"browser":true,"node":true},"rules":{"import/no-extraneous-dependencies":["error",{"devDependencies":["./.storybook/**/*.js","./rollup.config.js","./stories/**/*.jsx"]}],"react/jsx-sort-default-props":"off"}},"stylelint":{"extends":"@samuelmeuli/stylelint-config"},"prettier":"@samuelmeuli/prettier-config","gitHead":"b7571579948d2cf8bc773a15f3a03e576771c48f","bugs":{"url":"https://github.com/samuelmeuli/font-picker-react/issues"},"_id":"@arunmurugan/font-picker-react@3.6.2","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-zMLlk97t9v92FKpsGVvwLvOQmuRq5NeOq4AKk/MpHDKfCcrMEvoIZOkP2GT+s3xf+E5PlKdZlKG6BMr3HxyvqA==","shasum":"6b5e45eeadd59ec6a184f97a35b7b022f5c7d8b3","tarball":"https://registry.npmjs.org/@arunmurugan/font-picker-react/-/font-picker-react-3.6.2.tgz","fileCount":3,"unpackedSize":8566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhImy/CRA9TVsSAnZWagAABkEP/jmI0g8Vhm24z8p5pDat\nGXHtG8ooKo88K7X+BOCg4LrfExrQoNJNwVPoe0+Ii7y5kI4Izh5bHIe5pysr\nSTrcFy3fI56dZMyVXSqD9t+aXRLTzIOnfCmIbXeKlscg/60tLXRePr1RtwuA\nSSBZIqyGAWSkz9g1Nm75yBbwgE9Z8F7Rv1AcfU/cL7yTk4jDzzIAxoYXrub6\n5e3OnAbmAc7wdL79Tt7e0Hh1DFZfOEqWW64iGHWsBMALZ345/AJq8mFabcqX\nj8OI/voiD0MAt+XdY6n9h7WfornwktvPbfY2kjSnSkygPCsvs5S9FmW2p25g\nZ/WQkDYl8mjl2NMYuVim8DOftoZRAga8E9VSpDSS9twm2nqaB++GWB19nFH/\nRZmc/ExLbtYQsRJ8aiovRLxxFflnItZOzAa05qNn754pOt2eyA0RO6Ajpbjl\n8cETzHiKth0m45ED6zE+mlNK2Dh1C2kv4b5+qpBDjK9raNPiyytTr8gQDx/1\ndRBmFLChTnzEkkqAJnXrJH++6vpKzBzSjdXDuCkkYXchzdp2wE+DRlGWYgW8\nsJckqIqr35RMTS562xbp1tDIzjMxsnyr5sAtaP6g7KWn2s1vRDiLzMrmj3zz\nMclOK4lU7G1j54a9QK61uAEHalfKwMCeATkiPZUdwPwhAyueJYoAl/y1j3ZK\nPAv3\r\n=y78O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpJssXd1JYigntQ7btfyIOo2O39cP+Kxv0aObgaNEd9QIhANb8bbiOyOiz6vDZoYHb6LSX12sLZLmbJZlznmNWj8uT"}]},"_npmUser":{"name":"arunmurugan","email":"arunmurugan.official@gmail.com"},"directories":{},"maintainers":[{"name":"arunmurugan","email":"arunmurugan.official@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/font-picker-react_3.6.2_1629646015064_0.8895842210269436"},"_hasShrinkwrap":false},"3.6.3":{"name":"@arunmurugan/font-picker-react","version":"3.6.3","description":"Font selector component for Google Fonts","author":{"name":"Samuel Meuli","email":"me@samuelmeuli.com","url":"https://samuelmeuli.com"},"repository":{"type":"git","url":"git+https://github.com/samuelmeuli/font-picker-react.git"},"homepage":"https://font-picker.samuelmeuli.com","license":"MIT","keywords":["fonts","google fonts","selector","picker","component","preview","download","react","react-component"],"main":"./dist/FontPicker.js","module":"./dist/FontPicker.es.js","types":"./dist/FontPicker.d.ts","scripts":{"start":"npm-run-all build:clean build:ts --parallel start:*","start:ts":"rollup --config --sourcemap --watch","start:storybook":"start-storybook --port 3000","build":"run-s build:*","build:clean":"rm -rf ./dist/ && mkdir ./dist/","build:ts":"rollup --config","test":"tsc --noEmit","lint:css":"stylelint --ignore-path ./.gitignore --max-warnings 0 \"**/*.{css,sass,scss}\"","lint:css:fix":"yarn lint:css --fix","lint:ts":"eslint --ext .ts,.tsx --ignore-path ./.gitignore --max-warnings 0 \"**/*.{ts,tsx}\"","lint:ts:fix":"yarn lint:ts --fix","format":"prettier --ignore-path ./.gitignore --list-different \"**/*.{css,html,js,json,jsx,less,md,scss,ts,tsx,vue,yaml,yml}\"","format:fix":"yarn format --write","version":"yarn build","release":"np"},"dependencies":{"@samuelmeuli/font-manager":"^1.4.0"},"peerDependencies":{"@types/react":"^16.0.0","react":"^16.0.0"},"devDependencies":{"@babel/core":"^7.9.0","@samuelmeuli/eslint-config":"^6.0.0","@samuelmeuli/prettier-config":"^2.0.1","@samuelmeuli/stylelint-config":"^3.0.0","@samuelmeuli/tsconfig":"^1.0.0","@storybook/react":"^5.3.18","@types/react":"^16.9.34","@typescript-eslint/eslint-plugin":"^2.29.0","@typescript-eslint/parser":"^2.29.0","babel-loader":"^8.1.0","eslint":"6.8.0","eslint-config-airbnb":"18.1.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.20.2","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^2.5.1","np":"^6.2.2","npm-run-all":"^4.1.3","prettier":"^2.0.5","react":"^16.13.1","react-dom":"^16.13.1","rollup":"^1.32.1","rollup-plugin-typescript2":"^0.27.0","stylelint":"^12.0.1","typescript":"^3.8.3"},"browserslist":["defaults"],"eslintConfig":{"root":true,"extends":"@samuelmeuli/eslint-config/typescript-react","env":{"browser":true,"node":true},"rules":{"import/no-extraneous-dependencies":["error",{"devDependencies":["./.storybook/**/*.js","./rollup.config.js","./stories/**/*.jsx"]}],"react/jsx-sort-default-props":"off"}},"stylelint":{"extends":"@samuelmeuli/stylelint-config"},"prettier":"@samuelmeuli/prettier-config","gitHead":"1c9513219d805ff4d60d215d93b67a674261fab0","bugs":{"url":"https://github.com/samuelmeuli/font-picker-react/issues"},"_id":"@arunmurugan/font-picker-react@3.6.3","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-KjcY70pF4KD3VRM5Xf/BOqG6qTBrXtJWYntlALya+4JK6c/zoMSeBPV6EaZ3qV9O82XKf9116jIE9Xpc/B8WCg==","shasum":"cf156f6802c87a95408f0c78df784eef309d8edb","tarball":"https://registry.npmjs.org/@arunmurugan/font-picker-react/-/font-picker-react-3.6.3.tgz","fileCount":7,"unpackedSize":26917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhInAfCRA9TVsSAnZWagAA5LMP/2Cz6K8WNMS5x3uhvryK\n+1lieVhViqlxvCn+z2TUGDowNTbnTEpeWCclTr2niPsYSoazUBePRCfXuwv2\nBN4jVJhUHSuvbkzRIJqnVgBEhpw2FyV3nELzom0mh58QbUSEjCwpl4y71ou9\nBIwfOJOcYXAc1CmZM9++txrDJ/2QsD1XZovXMLdJIOV4QuPeRfj4+KjGVY0p\naPfVGYzIfNNxB6megUuVNIA3yQ793uzWUw+7tnEFGSuNpBQ2SQnLzBabBAzN\n2ArDUXvH+YIbLrFMSuyuF9yAciwablN39BSoVQlu16P4F/qp2QgNrbkQjFNy\nXSY0HV7vw3MULx+sBkzECwp/b7Fxx0LWlH3LQjGtlJ3JyvPivo+NJiMRg4v5\nq5tbWWI8g9hHTlVRrDOWvgQsiNe2LYrGVIdB/BU+T5qk5isXW1frAVn99O6B\neHi/MXQUqFYbvP8PJoBDkB7YWy/jOAD8qAod56Z38kqZtaEXwd9jWQx/i8Oc\n0+Z1A1NEF7X1tEiFx5lJNdSiC7V/odrQ8oeTkMejW+KI4rKrxCjni5W/SoZa\nOgHNpnTm6uWQX3k2OPRPv/qdx0tZmWbH5VMcMLRdlOLg4t6glR/4L2ymzTyK\n+WhjcCAxtkdnNkVGOy+IatmL2iw1+xX1fzgwXsRQW5PLzZ22YUwnqAAO/oGp\nfVcl\r\n=YGOR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeFZ9p21ZhnPpn6l7+7obbhaDICqJEU7B8MOtzDdbNcQIhAK1oWKfjL50cK5GH8LNtG+Ykw2LubCpQx2sEhA/Bo1NK"}]},"_npmUser":{"name":"arunmurugan","email":"arunmurugan.official@gmail.com"},"directories":{},"maintainers":[{"name":"arunmurugan","email":"arunmurugan.official@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/font-picker-react_3.6.3_1629646879802_0.3107784419251489"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-22T15:26:55.018Z","3.6.2":"2021-08-22T15:26:55.198Z","modified":"2022-04-04T15:41:05.471Z","3.6.3":"2021-08-22T15:41:19.953Z"},"maintainers":[{"name":"arunmurugan","email":"arunmurugan.official@gmail.com"}],"description":"Font selector component for Google Fonts","homepage":"https://font-picker.samuelmeuli.com","keywords":["fonts","google fonts","selector","picker","component","preview","download","react","react-component"],"repository":{"type":"git","url":"git+https://github.com/samuelmeuli/font-picker-react.git"},"author":{"name":"Samuel Meuli","email":"me@samuelmeuli.com","url":"https://samuelmeuli.com"},"bugs":{"url":"https://github.com/samuelmeuli/font-picker-react/issues"},"license":"MIT","readme":"# Font Picker for React\n\n**A simple, customizable font picker allowing users to preview, select and use Google Fonts on your website.**\n\n- Simple setup\n- No dependencies\n- Automatic font download and generation of the required CSS selectors\n- Efficient font previews (full fonts are only downloaded on selection)\n\n→ **[Demo](https://font-picker.samuelmeuli.com)**\n\n_This is the React component for the [**Font Picker**](https://github.com/samuelmeuli/font-picker) library._\n\n<p align=\"center\">\n  <img src=\".github/demo.gif\" width=\"700\" alt=\"Font picker demo\" />\n</p>\n\n## Getting started\n\nTo be able to access the API, you'll need to [generate a Google Fonts API key](https://developers.google.com/fonts/docs/developer_api#APIKey).\n\n### 1. Setup\n\nInstall the `font-picker-react` package using NPM:\n\n```sh\nnpm install font-picker-react\n```\n\n### 2. Displaying the font picker\n\nAdd the `FontPicker` component to your React code:\n\n```jsx\nimport React, { Component } from \"react\";\nimport FontPicker from \"font-picker-react\";\n\nexport default class ExampleComponent extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tactiveFontFamily: \"Open Sans\",\n\t\t};\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<FontPicker\n\t\t\t\t\tapiKey=\"YOUR_API_KEY\"\n\t\t\t\t\tactiveFontFamily={this.state.activeFontFamily}\n\t\t\t\t\tonChange={(nextFont) =>\n\t\t\t\t\t\tthis.setState({\n\t\t\t\t\t\t\tactiveFontFamily: nextFont.family,\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<p className=\"apply-font\">The font will be applied to this text.</p>\n\t\t\t</div>\n\t\t);\n\t}\n}\n```\n\n### 3. Applying the selected font\n\n**Add the class `\"apply-font\"` to all JSX elements you want to apply the selected font to.**\n\nWhen the user selects a font, it will automatically be downloaded and applied to all elements with the `\"apply-font\"` class.\n\n## Props\n\nThe following props can be passed to the `FontPicker` component:\n\n- **`apiKey` (required)**: Google API key\n- **`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`\n- **`onChange`**: Function which is executed when the user changes the active font. This function should update `activeFontFamily` in the component state\n- **`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\"`\n- **`families`**: If only specific fonts shall appear in the list, specify their names in an array. Default: All font families\n- **`categories`**: Array of font categories to include in the list. Possible values: `\"sans-serif\", \"serif\", \"display\", \"handwriting\", \"monospace\"`. Default: All categories\n- **`scripts`**: Array of scripts which the fonts must include and which will be downloaded on font selection. Default: `[\"latin\"]`. Example: `[\"latin\", \"greek\", \"hebrew\"]` (see [all possible values](https://github.com/samuelmeuli/font-picker/blob/master/src/shared/types.ts))\n- **`variants`**: Array of variants which the fonts must include and which will be downloaded on font selection. Default: `[\"regular\"]`. Example: `[\"regular\", \"italic\", \"700\", \"700italic\"]` (see [all possible values](https://github.com/samuelmeuli/font-picker/blob/master/src/shared/types.ts))\n- **`filter`**: Function which must evaluate to `true` for a font to be included in the list. Default: `font => true`. Example: If `font => font.family.toLowerCase().startsWith(\"m\")`, only fonts whose names begin with \"M\" will be in the list\n- **`limit`**: Maximum number of fonts to display in the list (the least popular fonts will be omitted). Default: `50`\n- **`sort`**: Sorting attribute for the font list. Possible values: `\"alphabet\", \"popularity\"`. Default: `\"alphabet\"`\n\n_Currently, only the `activeFontFamily`, `onChange` and `sort` props are reactive._\n\n## Development\n\nRequirements: Node.js, Yarn\n\n1. Clone this repository: `git clone REPO_URL`\n2. Install all dependencies: `yarn`\n3. Generate the library bundle: `yarn start`\n4. View the rendered component on `localhost:3000`\n\nSuggestions and contributions are always welcome! Please discuss larger changes via issue before submitting a pull request.\n","readmeFilename":"README.md"}