{"id":14109413,"url":"https://github.com/sapegin/react-components","last_synced_at":"2025-03-16T18:31:51.385Z","repository":{"id":66194632,"uuid":"67131721","full_name":"sapegin/react-components","owner":"sapegin","description":"List of React components I use and recommend","archived":false,"fork":false,"pushed_at":"2019-12-04T08:21:53.000Z","size":26,"stargazers_count":192,"open_issues_count":1,"forks_count":16,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-05-02T01:00:10.490Z","etag":null,"topics":["awesome-list","react","react-components"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sapegin.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","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}},"created_at":"2016-09-01T13:04:10.000Z","updated_at":"2024-04-08T01:42:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"f0e66526-72de-4a7e-bb9f-aa7d35dc54f6","html_url":"https://github.com/sapegin/react-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sapegin%2Freact-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sapegin%2Freact-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sapegin%2Freact-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sapegin%2Freact-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sapegin","download_url":"https://codeload.github.com/sapegin/react-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826783,"owners_count":20354220,"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":["awesome-list","react","react-components"],"created_at":"2024-08-14T10:02:17.622Z","updated_at":"2025-03-16T18:31:51.360Z","avatar_url":"https://github.com/sapegin.png","language":null,"readme":"# React Components Catalog\n\nInspired by the [awesome-react-components](https://github.com/brillout/awesome-react-components) but lists only the components I or [contributors](https://github.com/sapegin/react-components/graphs/contributors) use themeselves and can recommend. I believe 15 date picker components for React can’t be awesome and you still have no idea which one you should use.\n\n[![Washing your code. A book on clean code for frontend developers](https://sapegin.me/images/washing-code-github.jpg)](https://sapegin.me/book/)\n\n## UI components\n\n### Component libraries\n\n- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) — great project but the CSS is from original Bootstrap, so never use in a project with custom design.\n- [material-ui](http://www.material-ui.com/) — components that implement Google’s Material Design.\n- [semantic-ui-react](http://react.semantic-ui.com/introduction) — framework that helps create beautiful, responsive layouts.\n\n### Select\n\n- [react-select](https://github.com/JedWatson/react-select) — filtering, multiple selection, etc.\n\n### Date/time picker\n\n- [react-day-picker](https://github.com/gpbl/react-day-picker) — flexible date picker.\n\n### Autocomplete\n\n- [react-autosuggest](https://github.com/moroshko/react-autosuggest) — WAI-ARIA compliant.\n\n### Autosize textarea\n\n- [react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize) — replacement for the textarea element which automatically resizes textarea as content changes.\n\n### Masked input\n\n- [react-input-mask](https://github.com/sanniassin/react-input-mask) — input masking with attention to small usability details with cursor position, copy-paste, etc.\n\n### Rich text and code editing\n\n- [react-codemirror2](https://github.com/scniro/react-codemirror2) — CodeMirror component.\n\n### Markdown\n\nSee [#1](https://github.com/sapegin/react-components/issues/1) for discussion.\n\n- [simple-markdown](https://github.com/Khan/simple-markdown) — very small (4 KB, ~10 times smaller than alternatives), no HTML support.\n- [markdown-to-jsx](https://probablyup.github.io/markdown-to-jsx/) — a simple-markdown fork with HTML support, GFM task lists and syntax highlight.\n\n### Tables\n\n- [Reactabular](http://reactabular.js.org/) — very flexible framework to work with tables.\n\n### Grids and whitespace\n\n- [react-spaceman](https://github.com/sapegin/react-spaceman) — manage whitespace inside components and between components.\n- [Rebass Grid](https://rebassjs.org/grid/) — responsive React grid system built with styled-components\n- [Stack Styled](https://sapegin.github.io/stack-styled/) — make stack layouts easy\n\n### Miscellaneous\n\n- [Formik](https://github.com/jaredpalmer/formik) — form state management\n- [react-group](https://sapegin.github.io/react-group/) — render React children with a separator\n- [react-icons](http://gorangajic.github.io/react-icons/) — Font Awesome, Material icons, etc. as React components.\n- [react-pagify](https://github.com/bebraw/react-pagify) — very flexible but simple pagination, has a [Bootstrap skin](https://github.com/sapegin/react-pagify-preset-bootstrap).\n- [react-sortable-tree](https://github.com/fritz-c/react-sortable-tree) — drag-and-drop sortable component for nested data and hierarchies.\n\n## Hotkeys\n\n- [react-hotkeys](https://github.com/chrisui/react-hotkeys) — declarative hotkey and focus area management.\n\n## UI utilities\n\n- [Reach Router](https://reach.tech/router) — routing.\n- [react-document-title](https://github.com/gaearon/react-document-title) — Declarative, nested, stateful, isomorphic document.title.\n- [react-dnd](https://github.com/react-dnd/react-dnd) — drag and Drop.\n- [react-scroll](https://github.com/fisshy/react-scroll) — scroll component.\n- [react-intl](https://github.com/yahoo/react-intl) — React components and an API to format dates, numbers, and strings, including pluralization and handling translations.\n- [react-virtualized](https://github.com/bvaughn/react-virtualized) — components for efficiently rendering large lists and tabular data.\n\n## Utilities\n\n- [decko](https://github.com/developit/decko) — bind, debounce and memoize decorators.\n\n## Dev tools\n\n- [react-styleguidist](https://github.com/styleguidist/react-styleguidist) — Style guide generator and a workbench for developing components.\n\n## Other tools\n\n- [Spectacle](https://github.com/FormidableLabs/spectacle) — React based presentation library.\n\n## Removed components\n\nThese components were removed from the list, I can no longer recommend them. Feel free to send a pull request if the issue was fixed.\n\n- ~~[react-dimensions](https://github.com/digidem/react-dimensions) — higher-order component to get dimensions of container~~ abandoned\n- ~~[react-combo-keys](https://github.com/SamyPesse/react-combo-keys) — global hotkeys~~ react-hotkeys supports global hotkeys now\n- ~~[react-codemirror](https://github.com/JedWatson/react-codemirror) — CodeMirror component~~ — replaced with react-codemirror2\n- ~~[react-router](https://github.com/ReactTraining/react-router) — routing~~ — replaced with Reach Router\n\n## You may also like\n\n* [Jest cheat sheet](https://github.com/sapegin/jest-cheat-sheet)\n\n## Contributing\n\nSuggestions are welcome: just create an issue if you know something better than what I use.\n\n\n## Author and license\n[Artem Sapegin](http://sapegin.me/), a frontend engineer at Stage+ and the creator of [React Styleguidist](https://react-styleguidist.js.org/). I also write about frontend at [my blog](https://blog.sapegin.me/).\n\nCC0 1.0 Universal license, see the included [License.md](/License.md) file.\n","funding_links":[],"categories":["Other Lists","Misc"],"sub_categories":["TeX Lists","Design system catalogs"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsapegin%2Freact-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsapegin%2Freact-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsapegin%2Freact-components/lists"}