{"id":15069966,"url":"https://github.com/yummygum/react-flagpack","last_synced_at":"2025-04-09T05:10:34.738Z","repository":{"id":38383110,"uuid":"187219442","full_name":"Yummygum/react-flagpack","owner":"Yummygum","description":"Flagpack contains 250+ flag icons to easily use within your code project.","archived":false,"fork":false,"pushed_at":"2024-09-25T15:34:57.000Z","size":7243,"stargazers_count":138,"open_issues_count":22,"forks_count":32,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-02T04:03:47.962Z","etag":null,"topics":["flagpack","flags","icons","npm","react","svg"],"latest_commit_sha":null,"homepage":"https://flagpack.xyz","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/Yummygum.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":["Yummygum"],"custom":["https://www.paypal.com/paypalme/yummygum"]}},"created_at":"2019-05-17T13:16:39.000Z","updated_at":"2025-03-20T13:42:31.000Z","dependencies_parsed_at":"2024-03-29T13:25:33.730Z","dependency_job_id":"a692e838-30d0-462f-bcae-88a6b76ba8e0","html_url":"https://github.com/Yummygum/react-flagpack","commit_stats":{"total_commits":127,"total_committers":9,"mean_commits":14.11111111111111,"dds":0.6614173228346456,"last_synced_commit":"e6f9542cfc0a6fe65b41730f72fa760043ce8581"},"previous_names":["yummygum/react-flag-pack"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yummygum%2Freact-flagpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yummygum%2Freact-flagpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yummygum%2Freact-flagpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yummygum%2Freact-flagpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yummygum","download_url":"https://codeload.github.com/Yummygum/react-flagpack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"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":["flagpack","flags","icons","npm","react","svg"],"created_at":"2024-09-25T01:45:58.827Z","updated_at":"2025-04-09T05:10:34.718Z","avatar_url":"https://github.com/Yummygum.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Yummygum","https://www.paypal.com/paypalme/yummygum"],"categories":[],"sub_categories":[],"readme":"# Flagpack\n\nFlagpack contains 250+ flag icons to easily use within your code project. Flagpack is an open source project and available for JavaScript frameworks/libraries React, Vue and Svelte.\n\n![Flagpack. 260+ easily implementable flag icons to use in your design or code project. Open Source. Available for Sketch, Figma, Angular, Vue, and React. [www.flagpack.xyz](https://www.flagpack.xyz). Made with love by Yummygum. Graphic showing a list with the flags of Argentina, Croatia, Estonia, Kenia, Netherlands, and Scotland.](https://flagpack.xyz/meta-image.png)\n\n[View documentation on flagpack.xyz](https://flagpack.xyz/docs/)\n\n## react-flagpack\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-flagpack\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-flagpack.svg?style=flat\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-flagpack\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/react-flagpack.svg?style=flat\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/sponsors/Yummygum\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Support-♥-E94AAA\"  /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/flagpack\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/follow/flagpack.svg?style=social\u0026label=follow\"  /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nFlagpack for React is created using React v16.8. The Flagpack component has not been tested for compatibility with older versions of React.\n\n## Installation\n\n```bash\n$: npm install react-flagpack --save\n```\n\nThis package depends on the files being injected into the static folder of the project.\nReact flagpack comes bundled with a CLI that will do this automatically for you, but you have to tell node to execute it.\n\nAdd the following to the scripts in package.json *Note that postinstall sometimes doesn't run with certain package managers, so you may need to run it manually*\n\n```json\n{\n  \"scripts\": {\n    // ...rest of your scripts\n    \"postinstall\": \"react-flagpack\"\n  },\n  \"dependencies\": {\n    \"react-flagpack\": \"^2.0.5\"\n  }\n}\n```\n\n\nThis tool accepts the parameter \"--framework\" which can be used to pass the correct framework to it.\nThe default selected framework supports NextJS, create-react-app, Remix.\n\nFor Gastby support please provide the `--framework gatsby` option\n\n## Usage\n\n### Defining the component\nImport the Flagpack component into any of your project's React components.\n```js\nimport Flag from 'react-flagpack'\n// # Optional but required for props other than code \u0026 size to work.\n// Can also be imported in a css file using @import 'react-flagpack/dist/style.css';\nimport 'react-flagpack/dist/style.css'\n```\n\n### Use in JSX\n```jsx\n\u003cFlag\n  code=\"NL\"\n  gradient=\"real-linear\"\n  size=\"m\"\n  hasDropShadow\n/\u003e\n```\n\n## Available component configurations — Props\n\n| Key   | Value   | Required | Default | Format |\n|-------|-------|------|------|------|\n| code |  String | false | 'NL' | [See all codes](https://flagpack.xyz/docs/flag-index/) |\n| size |  String | false | 'L' | 'S', 'M' or 'L' |\n| className |  String | false | - | - |\n| hasDropShadow |  Boolean | false | false | - |\n| hasBorder |  Boolean | false | true | - |\n| hasBorderRadius | Boolean | false | true | - |\n| gradient |  String | false | '' | 'top-down', 'real-linear' or 'real-circular' |\n\n## Migrating to 2.0.0\nTo migrate to react-flagpack 2.0.0 you will need to make some minor changes to your code base. First you will need to add react-flagpack to your post-install hook see [installation](#installation), then run yarn install (ensuring you are on at minimal react-flagpack 2.0.2).\n\nAfter install you should see a flags folder in the public (or static) folder of your project.\n\nSince react-flagpack styles are no longer injected in the Flag by default.\nThis change was made for two reasons:\n- Server side support (the injecting relied on document)\n- Not all users require the default styling so this caused unnecessary addition to bundle size\n\nThe new way of loading the CSS is by importing the default styles. You can do this in one of two ways.\n```ts\n// Component.tsx - In a component where flagpack is used\nimport 'react-flagpack/dist/style.css'\n```\n\nOr\n\n```css\n/* Global.css - Importing it in the global css file */\n@import 'react-flagpack/dist/style.css';\n```\n\n## Support\n\n[Frequently Asked Questions](https://flagpack.xyz/support/)\n\n[Documentation](https://flagpack.xyz/docs/)\n\n## Releases\n\nYou can find a changelog of Flagpack's releases on the [Releases page](https://github.com/Yummygum/react-flagpack/releases) on GitHub.\n\n## Contribute\n\nIf you're interested in contributing to this project, great! Please see the [contributing document](CONTRIBUTING.md) how to set up you up.\n\n## License\n\nFlagpack is an open source project published under a [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyummygum%2Freact-flagpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyummygum%2Freact-flagpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyummygum%2Freact-flagpack/lists"}