{"id":20067718,"url":"https://github.com/ae9is/react-fontpicker","last_synced_at":"2025-04-06T23:16:39.457Z","repository":{"id":82264273,"uuid":"603678961","full_name":"ae9is/react-fontpicker","owner":"ae9is","description":"A Google font picker for React","archived":false,"fork":false,"pushed_at":"2025-03-03T10:37:26.000Z","size":155767,"stargazers_count":35,"open_issues_count":3,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T22:09:47.109Z","etag":null,"topics":["component-library","cypress","font","fontpicker","google-fonts","picker","react","svg","typescript","vite","vitest"],"latest_commit_sha":null,"homepage":"https://ae9is.github.io/react-fontpicker/","language":"CSS","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/ae9is.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-19T08:48:16.000Z","updated_at":"2025-03-11T22:44:09.000Z","dependencies_parsed_at":"2025-01-15T08:26:43.481Z","dependency_job_id":"96735982-4d8f-4bcc-bbfa-b06ed4126028","html_url":"https://github.com/ae9is/react-fontpicker","commit_stats":{"total_commits":228,"total_committers":5,"mean_commits":45.6,"dds":0.3991228070175439,"last_synced_commit":"88458cd77038280b116887aa734872d1bebb70a1"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ae9is%2Freact-fontpicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ae9is%2Freact-fontpicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ae9is%2Freact-fontpicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ae9is%2Freact-fontpicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ae9is","download_url":"https://codeload.github.com/ae9is/react-fontpicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247563935,"owners_count":20958971,"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":["component-library","cypress","font","fontpicker","google-fonts","picker","react","svg","typescript","vite","vitest"],"created_at":"2024-11-13T14:03:08.044Z","updated_at":"2025-04-06T23:16:39.431Z","avatar_url":"https://github.com/ae9is.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-fontpicker\n\n[![Fontpicker](https://img.shields.io/npm/v/react-fontpicker-ts.svg?label=npm/fontpicker)](https://www.npmjs.com/package/react-fontpicker-ts) \u0026nbsp; [![Fontpicker-Lite](https://img.shields.io/npm/v/react-fontpicker-ts-lite.svg?label=npm/fontpicker-lite)](https://www.npmjs.com/package/react-fontpicker-ts-lite)\n\nA Google font picker component for React.\n\n- No dependencies (other than React)\n- No Google API key required\n- 1600+ Google fonts, customisable\n- Fast, high quality font previews from pre-generated SVG images\n- Optionally autoloads fonts\n\nForked from https://github.com/Mikk3lRo/vue-fontpicker/\n\n\u003cimg src=\".github/demo.gif\" width=400 alt=\"Animation showing the font picker\" /\u003e\n\n## Documentation\n\nA live demo including usage is available at:\nhttps://ae9is.github.io/react-fontpicker/\n\n## Installing\n\n```bash\n# npm\nnpm i react-fontpicker-ts\n# yarn\nyarn add react-fontpicker-ts\n\n# much smaller package with fewer fonts\nnpm i react-fontpicker-ts-lite\n```\n\nThen, import the component and stylesheet:\n\n```js\nimport FontPicker from 'react-fontpicker-ts'\nimport 'react-fontpicker-ts/dist/index.css'\n```\n\n## Styling\n\nSee css classnames in: [packages/fontpicker/src/components/FontPicker.css](https://github.com/ae9is/react-fontpicker/tree/main/packages/fontpicker/src/components/FontPicker.css)\n\n[An example restyling the font picker](https://gist.github.com/ae9is/dbb2d0b86b31b630ca590d458ed85274)\n\nAn example integrating the font picker into an actual app: [ae9is/uimix](https://github.com/ae9is/uimix/commit/52fd0292a094bbcdfa766ce36ace055a7de93838)\n\n## Project structure\n\nThe font picker project lives in this [Turborepo](https://turbo.build/repo/docs) monorepo at [packages/fontpicker/](https://github.com/ae9is/react-fontpicker/tree/main/packages/fontpicker/)\n\nThe [live demo](https://ae9is.github.io/react-fontpicker/) is a Vite app you can run yourself via `npm run dev` and which builds to `/docs`. Uses `tsconfig.json`.\n\nThe font picker component itself builds via `tsup` (i.e. `esbuild`) to `/dist` with type definitions generated via `tsc` according to `tsconfig.types.json`.\n\nThe font preview generation script downloads font files to `/font-cache` and builds font image previews to `/font-preview`.\n\n## Performance\n\nThe font picker previews work by loading font preview image files in CSS. The fonts are split across many image files for faster initial preview.\n\nOnce the dropdown select is opened, all the preview image files are retrieved enabling smooth scrolling and searching.\n\nNo requests are made to the Google fonts API unless the font picker is set to autoload, in which case the currently selected font is appended to the page header. (The previously selected font link is _not_ removed.)\n\nFor example:\n\n```html\n\u003chead\u003e\n  ...\n  \u003clink\n    rel=\"stylesheet\"\n    id=\"google-font-rock_salt-all\"\n    href=\"https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400\u0026amp;display=swap\"\n  /\u003e\n\u003c/head\u003e\n```\n\nThe big trade-off of this approach is that the component's bundle is quite large due to all the font image previews: 8 MB in compressed SVG images for 1633 fonts. Make sure you serve compressed SVGs! [See here for an example for Vite.](packages/fontpicker/vite.config.mts)\n\nIf you're looking for a lighter weight option, you can use `react-fontpicker-ts-lite` instead which is around 180 KB.\n\nOr, for a different font picker following an on demand approach, check out: [https://github.com/samuelmeuli/font-picker-react](https://github.com/samuelmeuli/font-picker-react)\n\n`font-picker-react` requires a Google API key, and works best at the default font limit of 50 (fonts to choose from).\n\n## Building font previews\n\n_Note: most users shouldn't need to rebuild the font previews, but this section is included for convenience if you need to grab the latest fonts or edit the previews._\n\n### 1\\. Google API key\n\nGet a Google API key here [https://developers.google.com/fonts/docs/developer_api#APIKey](https://developers.google.com/fonts/docs/developer_api#APIKey) and create a new file called `GOOGLE_API_KEY` in `react-fontpicker/packages/fontpicker/scripts`, in the same directory as the `scripts/buildFontPreviews.ts` script.\n\n### 2\\. Font preview script\n\n#### All Google fonts\n\nTo generate font previews for all currently available Google fonts (latin font families only, minus `Kumar One`).\n\n```bash\ncd react-fontpicker/packages/fontpicker\nnpm run build-font-previews\n```\n\n_Note: For 1600 fonts, budget 20-30 minutes and 800 MB to download all the fonts. Compiling the image previews themselves should be less than a minute. When re-running, the script only retrieves new font info if it's older than 1 week and skips downloading cached fonts._\n\n#### Custom fonts\n\nTo generate font previews for custom fonts you'll need some info about the fonts and paths to the font file downloaded in TTF format.\n\n```bash\nbuildFontPreviews.ts output-dir \"font-name|font-category|font-variants-info|font-file\" \"font-name-2...\"\n```\n\nWhere font-variants-info is an array of values like 0,400 and 1,700 joined by +.\nThe first value denotes a normal (0) or italic (1) font.\nThe second value is the font weight (i.e. 100 = thin, 400 = normal, 700 = bold, 900 = heavy).\n\nFor example:\n\n```bash\nbuildFontPreviews.ts output-dir \"FontName|sans-serif|0,400+0,700+1,400+1,700|/path/to/font.ttf\" \"Font2|serif|0,400|/path/to/font2.ttf\"\n```\n\nSee the `build-font-previews-manual` run script in: [packages/fontpicker/package.json](packages/fontpicker/package.json)\n\n## Development\n\n### Installation\n\nThis monorepo uses [Turborepo](https://turbo.build/repo/docs).\n\n### Testing\n\nThe app uses Vitest and [Cypress](https://docs.cypress.io/guides/getting-started/installing-cypress) for testing. Make sure to setup the prerequisites for Cypress on your system.\n\nOn Ubuntu:\n\n```bash\napt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fae9is%2Freact-fontpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fae9is%2Freact-fontpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fae9is%2Freact-fontpicker/lists"}