Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sapegin/react-components

List of React components I use and recommend
https://github.com/sapegin/react-components

List: react-components

awesome-list react react-components

Last synced: 7 days ago
JSON representation

List of React components I use and recommend

Awesome Lists containing this project

README 

        
# React Components Catalog



Inspired 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.



## UI components



### Component libraries



- [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.

- [material-ui](http://www.material-ui.com/) — components that implement Google’s Material Design.

- [semantic-ui-react](http://react.semantic-ui.com/introduction) — framework that helps create beautiful, responsive layouts.



### Select



- [react-select](https://github.com/JedWatson/react-select) — filtering, multiple selection, etc.



### Date/time picker



- [react-day-picker](https://github.com/gpbl/react-day-picker) — flexible date picker.



### Autocomplete



- [react-autosuggest](https://github.com/moroshko/react-autosuggest) — WAI-ARIA compliant.



### Autosize textarea



- [react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize) — replacement for the textarea element which automatically resizes textarea as content changes.



### Masked input



- [react-input-mask](https://github.com/sanniassin/react-input-mask) — input masking with attention to small usability details with cursor position, copy-paste, etc.



### Rich text and code editing



- [react-codemirror2](https://github.com/scniro/react-codemirror2) — CodeMirror component.



### Markdown



See [#1](https://github.com/sapegin/react-components/issues/1) for discussion.



- [simple-markdown](https://github.com/Khan/simple-markdown) — very small (4 KB, ~10 times smaller than alternatives), no HTML support.

- [markdown-to-jsx](https://probablyup.github.io/markdown-to-jsx/) — a simple-markdown fork with HTML support, GFM task lists and syntax highlight.



### Tables



- [Reactabular](http://reactabular.js.org/) — very flexible framework to work with tables.



### Grids and whitespace



- [react-spaceman](https://github.com/sapegin/react-spaceman) — manage whitespace inside components and between components.

- [Rebass Grid](https://rebassjs.org/grid/) — responsive React grid system built with styled-components

- [Stack Styled](https://sapegin.github.io/stack-styled/) — make stack layouts easy



### Miscellaneous



- [Formik](https://github.com/jaredpalmer/formik) — form state management

- [react-group](https://sapegin.github.io/react-group/) — render React children with a separator

- [react-icons](http://gorangajic.github.io/react-icons/) — Font Awesome, Material icons, etc. as React components.

- [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).

- [react-sortable-tree](https://github.com/fritz-c/react-sortable-tree) — drag-and-drop sortable component for nested data and hierarchies.



## Hotkeys



- [react-hotkeys](https://github.com/chrisui/react-hotkeys) — declarative hotkey and focus area management.



## UI utilities



- [Reach Router](https://reach.tech/router) — routing.

- [react-document-title](https://github.com/gaearon/react-document-title) — Declarative, nested, stateful, isomorphic document.title.

- [react-dnd](https://github.com/react-dnd/react-dnd) — drag and Drop.

- [react-scroll](https://github.com/fisshy/react-scroll) — scroll component.

- [react-intl](https://github.com/yahoo/react-intl) — React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

- [react-virtualized](https://github.com/bvaughn/react-virtualized) — components for efficiently rendering large lists and tabular data.



## Utilities



- [decko](https://github.com/developit/decko) — bind, debounce and memoize decorators.



## Dev tools



- [react-styleguidist](https://github.com/styleguidist/react-styleguidist) — Style guide generator and a workbench for developing components.



## Other tools



- [Spectacle](https://github.com/FormidableLabs/spectacle) — React based presentation library.



## Removed components



These components were removed from the list, I can no longer recommend them. Feel free to send a pull request if the issue was fixed.



- ~~[react-dimensions](https://github.com/digidem/react-dimensions) — higher-order component to get dimensions of container~~ abandoned

- ~~[react-combo-keys](https://github.com/SamyPesse/react-combo-keys) — global hotkeys~~ react-hotkeys supports global hotkeys now

- ~~[react-codemirror](https://github.com/JedWatson/react-codemirror) — CodeMirror component~~ — replaced with react-codemirror2

- ~~[react-router](https://github.com/ReactTraining/react-router) — routing~~ — replaced with Reach Router



## You may also like



* [Jest cheat sheet](https://github.com/sapegin/jest-cheat-sheet)



## Contributing



Suggestions are welcome: just create an issue if you know something better than what I use.



## Author and license

[Artem Sapegin](http://sapegin.me/), a frontend engineer at [Omio](https://omio.com/) and the creator of [React Styleguidist](https://react-styleguidist.js.org/). I also write about frontend at [my blog](https://blog.sapegin.me/).



CC0 1.0 Universal license, see the included [License.md](/License.md) file.