{"id":15633641,"url":"https://github.com/samuelmeuli/font-picker-react","last_synced_at":"2025-04-05T08:09:29.346Z","repository":{"id":43673665,"uuid":"119109790","full_name":"samuelmeuli/font-picker-react","owner":"samuelmeuli","description":"✏️ Font selector component for Google Fonts","archived":false,"fork":false,"pushed_at":"2020-07-16T21:25:01.000Z","size":2099,"stargazers_count":159,"open_issues_count":17,"forks_count":71,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T07:08:08.854Z","etag":null,"topics":["font-picker","font-selector","fonts","google-fonts","react","react-component"],"latest_commit_sha":null,"homepage":"https://font-picker.samuelmeuli.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samuelmeuli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-26T22:23:18.000Z","updated_at":"2025-02-16T19:57:17.000Z","dependencies_parsed_at":"2022-08-03T02:15:39.806Z","dependency_job_id":null,"html_url":"https://github.com/samuelmeuli/font-picker-react","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelmeuli%2Ffont-picker-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelmeuli%2Ffont-picker-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelmeuli%2Ffont-picker-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelmeuli%2Ffont-picker-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samuelmeuli","download_url":"https://codeload.github.com/samuelmeuli/font-picker-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305935,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font-picker","font-selector","fonts","google-fonts","react","react-component"],"created_at":"2024-10-03T10:49:47.252Z","updated_at":"2025-04-05T08:09:29.330Z","avatar_url":"https://github.com/samuelmeuli.png","language":"TypeScript","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\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/demo.gif\" width=\"700\" alt=\"Font picker demo\" /\u003e\n\u003c/p\u003e\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\u003cdiv\u003e\n\t\t\t\t\u003cFontPicker\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) =\u003e\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/\u003e\n\t\t\t\t\u003cp className=\"apply-font\"\u003eThe font will be applied to this text.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\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 =\u003e true`. Example: If `font =\u003e 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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelmeuli%2Ffont-picker-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuelmeuli%2Ffont-picker-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelmeuli%2Ffont-picker-react/lists"}