{"id":28763093,"url":"https://github.com/nordsoftware/react-foundation","last_synced_at":"2025-06-17T09:01:45.937Z","repository":{"id":5653879,"uuid":"53612920","full_name":"digiaonline/react-foundation","owner":"digiaonline","description":"Foundation as React components.","archived":true,"fork":false,"pushed_at":"2023-03-03T12:15:05.000Z","size":880,"stargazers_count":596,"open_issues_count":0,"forks_count":68,"subscribers_count":28,"default_branch":"main","last_synced_at":"2025-06-08T13:23:42.241Z","etag":null,"topics":["css","foundation","hacktoberfest","react","react-components","scss"],"latest_commit_sha":null,"homepage":"https://digia.online/react-foundation-docs/","language":"JavaScript","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/digiaonline.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-03-10T19:58:03.000Z","updated_at":"2025-05-15T22:12:08.000Z","dependencies_parsed_at":"2023-07-18T01:27:06.851Z","dependency_job_id":null,"html_url":"https://github.com/digiaonline/react-foundation","commit_stats":{"total_commits":241,"total_committers":22,"mean_commits":"10.954545454545455","dds":0.4107883817427386,"last_synced_commit":"cae0374614bd16c781959fd4ebafeddcd797a5c2"},"previous_names":["nordsoftware/react-foundation"],"tags_count":44,"template":false,"template_full_name":null,"purl":"pkg:github/digiaonline/react-foundation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digiaonline%2Freact-foundation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digiaonline%2Freact-foundation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digiaonline%2Freact-foundation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digiaonline%2Freact-foundation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digiaonline","download_url":"https://codeload.github.com/digiaonline/react-foundation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digiaonline%2Freact-foundation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260326516,"owners_count":22992368,"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":["css","foundation","hacktoberfest","react","react-components","scss"],"created_at":"2025-06-17T09:01:25.910Z","updated_at":"2025-06-17T09:01:45.892Z","avatar_url":"https://github.com/digiaonline.png","language":"JavaScript","readme":"# React + Foundation\n\n[![Build](https://github.com/digiaonline/react-foundation/actions/workflows/test.yml/badge.svg)](https://github.com/digiaonline/react-foundation/actions)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/ea90da79f63c9d5dab1a/test_coverage)](https://codeclimate.com/github/digiaonline/react-foundation/test_coverage)\n[![Maintainability](https://api.codeclimate.com/v1/badges/ea90da79f63c9d5dab1a/maintainability)](https://codeclimate.com/github/digiaonline/react-foundation/maintainability)\n[![StyleCI](https://styleci.io/repos/53612920/shield?style=flat)](https://styleci.io/repos/53612920)\n[![npm version](https://img.shields.io/npm/v/react-foundation.svg)](https://www.npmjs.com/package/react-foundation)\n[![npm downloads](https://img.shields.io/npm/dt/react-foundation.svg)](https://www.npmjs.com/package/react-foundation)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/digiaonline/react-foundation/main/LICENSE)\n\n[Foundation](https://get.foundation/sites/docs/) as [React](https://reactjs.org/) components.\n\n## Demo\n\nhttps://digia.online/react-foundation-docs/\n\n[Components with Bit](https://bit.dev/digiaonline/react-foundation)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bitsrc.io/digiaonline/react-foundation\"\u003e\u003cimg src=\"https://i.imagesup.co/images2/0__05c740dc39b7e2.jpg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n## Motivation\n\n[Foundation](https://get.foundation/sites/docs/) is both feature-rich and easy to customize.\n[React](https://reactjs.org/) on the other hand is awesome because of its simplicity.\nIt's even more awesome when combined with\n[Redux](https://redux.js.org/) and [Immutable](https://immutable-js.com/).\n\nAfter building quite a few applications with React and Foundation we noticed that we were writing the\nsame components over and over again. First we tried to find a library that would do the job,\nbut there was none that met our needs. So we collected our notes, started coding and here's the result.\n\nWe hope you enjoy it as much as we do!\n\n## What's in the box?\n\nThe goal is to wrap every part of Foundation into re-usable React components following the framework's\nbest practices. The primary focus is ease-of-use and extensibility. We use pure render components,\nalso known as stateless components, whenever possible to keep the memory usage to a minimum. Stateful\ncomponents are only used for larger components, such as `ResponsiveNavigation`, where state is actually necessary.\nAll components are unit-tested to ensure their quality.\n\nHere is a list of the available components:\n\n* [Accordion](src/components/accordion.js)\n* [Badge](src/components/badge.js)\n* [Breadcrumbs](src/components/breadcrumbs.js)\n* [Button](src/components/button.js)\n* [ButtonGroup](src/components/button-group.js)\n* [Callout](src/components/callout.js)\n* [CloseButton](src/components/close-button.js)\n* [FlexVideo](src/components/flex-video.js)\n* [Grid](src/components/grid.js)\n* [Icon](src/components/icon.js)\n* [Label](src/components/label.js)\n* [MediaObject](src/components/media-object.js)\n* [Menu](src/components/menu.js)\n* [Pagination](src/components/pagination.js)\n* [Progress](src/components/progress-bar.js)\n* [ResponsiveNavigation](src/components/responsive.js)\n* [Switch](src/components/switch.js)\n* [Tabs](src/components/tabs.js)\n* [Thumbnail](src/components/thumbnail.js)\n* [TopBar](src/components/top-bar.js)\n\nMore components coming soon!\n\n## Install\n\nInstall library:\n\n```bash\nnpm install react-foundation --save\n```\n\nInstall [foundation-sites](https://www.npmjs.com/package/foundation-sites):\n\n```bash\nnpm install foundation-sites --save\n```\n\n## Usage\n\n```js\n// Add Foundation to index.js\nimport 'foundation-sites/dist/css/foundation.min.css';\n\n// import components\nimport { Button, Colors } from 'react-foundation';\n\n// Use components ...\nfunction SubmitButton() {\n  return \u003cButton color={Colors.SUCCESS}\u003eSubmit\u003c/Button\u003e;\n}\n```\n\nDocumentation is at https://digia.online/react-foundation-docs/.\n\n*Note:* Newer versions of `foundation-sites` do not offer out of the box support for `\u003cRow/\u003e` and `\u003cColumn/\u003e` components. If working with a newer version, `\u003cGrid/\u003e` and `\u003cCell/\u003e` components should be used instead.\n\n```js\n// Previous versions\n\u003cRow className=\"display\"\u003e\n  \u003cColumn small={2} large={4}\u003e4 columns\u003c/Column\u003e\n  \u003cColumn small={4} large={4}\u003e4 columns\u003c/Column\u003e\n  \u003cColumn small={6} large={4}\u003e4 columns\u003c/Column\u003e\n\u003c/Row\u003e\n\n// Newer versions\n\u003cGrid className=\"display\"\u003e\n  \u003cCell small={2} large={4}\u003e4 columns\u003c/Cell\u003e\n  \u003cCell small={4} large={4}\u003e4 columns\u003c/Cell\u003e\n  \u003cCell small={6} large={4}\u003e4 columns\u003c/Cell\u003e\n\u003c/Grid\u003e\n```\n\n## Contributing\n\nPlease read our [guidelines](.github/CONTRIBUTING.md).\n\n## Credits\n\n* Thanks to [Nord Software](https://twitter.com/nordsoftware) and [Digia](https://digia.com/en/) for sponsoring initial development.\n* Thanks to [@jmreidy](https://github.com/jmreidy) for releasing the `react-foundation` package name to us on [NPM](https://www.npmjs.com/).\n\n## License\n\nSee [LICENSE](LICENSE).\n","funding_links":[],"categories":["UI Frameworks","Cases"],"sub_categories":["style","Responsive"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnordsoftware%2Freact-foundation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnordsoftware%2Freact-foundation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnordsoftware%2Freact-foundation/lists"}