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