React Libraries to use

React Frameworks

• next.js - The React Framework

Next.js Routing

• next-connect - Minimal router and middleware layer for Next.js

React Styling and Component Libraries

• chakra-ui - Simple, Modular & Accessible UI Components for your React Applications
  • emotion (Used by ChakraUI) - CSS-in-JS library designed for high performance style composition
  • styled-system (Used by ChakraUI) - Style props for rapid UI development

React State Management

• mobx - Simple, scalable state management
• datx - A MobX data store
• swr - React Hooks library for remote data fetching

Forms

• react-hook-form - React Hooks for forms validation (Web + React Native)

React Components

• react-select - The Select Component for React.js
• react-datepicker - A simple and reusable datepicker component for React
• react-virtualized - React components for efficiently rendering large lists and tabular data
• react-virtuoso - An elegant virtual list component for React
• @tanstack/react-virtual - Headless UI for Virtualizing Large Element Lists
• @tippyjs/react - The complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper
• downshift - A set of primitives to build autocomplete, combobox or select dropdown React components
• react-collapse - Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height
• react-markdown - Markdown component for React
• react-slider - Accessible, CSS agnostic, slider component for React
• react-qr-code - A QR code generator for React and React Native
• react-modal - Accessible modal dialog component for React
• react-cool-inview - React hook to monitor an element enters or leaves the viewport (or another element)
• react-avatar-editor - Small avatar & profile picture component that allows resizing and cropping uploaded images using a intuitive user interface
• react-rating - A rating react component with custom symbols
• react-compound-slider - A small React slider with no opinion on markup or styles
• react-slick - React carousel component
• @datepicker-react/hooks - An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components
• react-headroom - Hide your header until you need it

React Animation Libraries

• react-transition-group - An easy way to perform animations when a React component enters or leaves the DOM
• react-spring - A spring physics based React animation library
• framer-motion - Open source, production-ready animation and gesture library for React

React Chart Libraries

• recharts - Redefined chart library built with React and D3
• nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

React Code Style

• eslint - Find and fix problems in your JavaScript code
• eslint-config-react-ts - Infinum's ESLint React TypeScript shareable config
• prettier - Prettier is an opinionated code formatter

React Development Tools

• storybook - Development environment for UI components

React Testing

• jest - Delightful JavaScript Testing
• react-testing-library - Simple and complete React DOM testing utilities that encourage good testing practices
• react-hooks-testing-library - Simple and complete React hooks testing utilities that encourage good testing practices
• @testing-library/user-event - Simulate user events for react-testing-library
• jest-dom - Custom jest matchers to test the state of the DOM
• identity-obj-proxy - Useful for mocking webpack imports
• ts-jest - TypeScript preprocessor with sourcemap support for Jest
• jest-svg-transformer - Transform svgs for for jest+react to declutter snapshots
• @emotion/jest - Jest testing utilities for emotion

Other Libraries

• react-focus-lock - Focus locking
• @jesstelford/react-portal-universal - Generic wrapper for React's createPortal allowing for rendering portals on the server
• date-fns - Modern JavaScript date utility library
• date-fns-tz - Complementary library for date-fns v2 adding IANA time zone support
• react-error-boundary - Simple reusable React error boundary component
• react-window - React components for efficiently rendering large lists and tabular data
• nprogress - For slim progress bars like on YouTube, Medium, etc
• @bugsnag/js - Javascript error handling tool for Bugsnag. Monitor and report JavaScript bugs & errors.
• @bugsnag/plugin-react - A @bugsnag/js plugin for React
• focus-visible - Polyfill for :focus-visible
• react-use-gesture - Bread n butter utility for component-tied mouse/touch gestures in React
• react-use-measure - Utility to measure view bounds
• googlemap-react - Easier Google Map Integration for React projects
• react-merge-refs - React utility to merge refs
• slate - A completely customizable framework for building rich text editors. (Currently in beta.)
• libphonenumber-js - Validator/formatter for phone numbers (has seaparate validators for different countries)
• react-dropzone - Simple React hook to create a HTML5-compliant drag'n'drop zone for files.

Localization

• i18next - i18next: learn once - translate everywhere
• react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.

Next.js plugins

• next-compose-plugins - Cleaner API for enabling and configuring plugins for Next.js
• next-react-svg - Transform your svg image to a React component
• next-seo - Managing your SEO easier in Next.js
• @next/bundle-analyzer - Use webpack-bundle-analyzer in your Next.js project
• next-transpile-modules - Next.js plugin to transpile code from node_modules

Other good React Libraries (consult with TL or LE before using them)

React Development Tools

• create-react-app - Project setup by running one command

React Routing

• react-router - Declarative routing for React

React Styling

• styled-components - Visual primitives for the component age