My React.js Library Bookmarks
Tags: react, javascript, webdev
Published: 2020-09-08 15:54:25

React mainly focuses on what it does best (rendering UI components to build user interfaces) and leaves the gaps to be filled by the huge community of developers and companies.

This means the number of popular libraries and ways of doing things can definitely add up which has its pros and cons:

Pros :white_check_mark:
* You are not locked into one way of doing something, you have an array of great options to suit your needs the best.
* React has a HUGE ecosystem of people building and maintaining libraries, so odds are if you need to do something in particular there will (9 times out of 10) be an open-source npm package for it.

Cons :x:
* This can be confusing for beginners. Since you have so many options, people sometimes just go for the most popular one even if it doesn’t necessarily meet their needs.
* The latest and greatest is constantly changing, it is important to choose libraries that are actively maintained and will move forward with industry standards when it does.

With that being said, here is a list of the React libraries I currently have bookmarked. These emojis next to each library show my personal experience with each library:
* :star: - my all-time favorites
* :white_check_mark: - have used in production and would advocate for
* :clock3: - have never used but am planning on using in the future
* :thinking: - have never used but would be interested in
* :wave: - have used in production but have since moved on from

## Component UI Libraries
* Semantic UI React :white_check_mark: [https://react.semantic-ui.com/](https://react.semantic-ui.com/)
* Fluent UI :white_check_mark: [https://developer.microsoft.com/en-us/fluentui#/](https://developer.microsoft.com/en-us/fluentui#/)
* Chakra UI :clock3: [https://chakra-ui.com/](https://chakra-ui.com/)
* Ant Design :thinking: [https://ant.design/](https://ant.design/)
* Material UI :wave: [https://material-ui.com/](https://material-ui.com/)
* React Bootstrap/reactstrap :wave: [https://react-bootstrap.github.io/](https://react-bootstrap.github.io/)

## State Management 
* React Internal State / Context (not a library) :white_check_mark: [https://reactjs.org/docs/context.html](https://reactjs.org/docs/context.html)
* Redux :wave: [https://redux.js.org/](https://redux.js.org/)

## Client-Side Routing
*  react-router :white_check_mark: [https://reactrouter.com/](https://reactrouter.com/)

## SSG (Static Site Generation) / SSR (Server-Side Rendering) 
* Next.js :star: [https://nextjs.org/](https://nextjs.org/)
* Gatsby :thinking: [https://www.gatsbyjs.com/](https://www.gatsbyjs.com/)

## Testing
* react-testing-library :star: [https://testing-library.com/docs/react-testing-library/intro](https://testing-library.com/docs/react-testing-library/intro)
* Enzyme :wave: [https://enzymejs.github.io/enzyme/](https://enzymejs.github.io/enzyme/)

## Forms
* react-hook-form :white_check_mark: [https://react-hook-form.com/](https://react-hook-form.com/)
* formik :thinking: [https://formik.org/](https://formik.org/)

## Animations
* framer/motion :clock3: [https://www.framer.com/motion/](https://www.framer.com/motion/)
* react-spring :thinking: [https://www.react-spring.io/](https://www.react-spring.io/)
* react-motion :thinking: [https://github.com/chenglou/react-motion](https://github.com/chenglou/react-motion)
* react-transition-group :thinking: [https://github.com/reactjs/react-transition-group](https://github.com/reactjs/react-transition-group)

## Async
* react-query :white_check_mark: [https://react-query.tanstack.com/](https://react-query.tanstack.com/)

## Data Tables 
* react-table :white_check_mark: [https://react-table-omega.vercel.app/](https://react-table-omega.vercel.app/)

## Internationalization
* react-intl :white_check_mark: [https://github.com/formatjs/formatjs](https://github.com/formatjs/formatjs)

<hr/>
# Honorable Mentions :heavy_plus_sign:

These are some other libraries that I have bookmarked/starred but have not yet used in production.

## Drop-downs
* react-select [https://react-select.com/home](https://react-select.com/home)

## Drag & Drop
* react-dnd [https://react-dnd.github.io/react-dnd/about](https://react-dnd.github.io/react-dnd/about)
* react-beautiful-dnd [https://github.com/atlassian/react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)

## Document `<head>` Manager
* react-helmet [https://github.com/nfl/react-helmet](https://github.com/nfl/react-helmet)

## Icons
*  react-icons [https://github.com/react-icons/react-icons](https://github.com/react-icons/react-icons)

## Loading Spinners
* react-spinners [https://github.com/davidhu2000/react-spinners](https://github.com/davidhu2000/react-spinners)

## Social Media Share Buttons
* react-share [https://github.com/nygardk/react-share](https://github.com/nygardk/react-share)

## Responsive Styling
* react-responsive [https://github.com/contra/react-responsive](https://github.com/contra/react-responsive)

With the vast ecosystem of libraries, I am sure that I left out some good ones. If I did, leave some of your favorite libraries in the comments and let me know what you think of the list!

Also if you like web development and meme content follow my [Twitter](https://twitter.com/michaelgee7) :smile: