React Libraries to use

React Frameworks

• next.js - The React Framework

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
• radix-ui/primitives - Unstyled, accessible, and highly composable low-level components for building React applications. Designed to provide the base structure and functionality without styling, allowing developers to build custom-styled components while retaining accessibility and flexibility
• radix-ui/themes - A collection of customizable and accessible themes for Radix Primitives. It includes pre-built themes with thoughtfully crafted color schemes, ensuring good contrast and usability, and it provides a starting point for creating visually cohesive applications
• styled-jsx - Full, scoped, and server-rendered CSS for Next.js applications. Styled-JSX enables scoped CSS with standard CSS syntax, supporting the use of dynamic styling and ensuring that styles are isolated to individual components, which is especially useful for server-side rendering in Next.js

React State Management

• datx - A MobX data store
• TanStack Query - Hooks for fetching, caching and updating asynchronous data in React

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-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
• next-intl - A lightweight Next.js library for internationalization, supporting server components, dynamic routing, and translations with JSON files, designed for simpler integration without extensive configuration.

Next.js plugins

• next-compose-plugins - Cleaner API for enabling and configuring plugins for Next.js
• @svgr/webpack - A webpack loader that transforms SVG files into React components, enabling inline SVG usage with customizable properties, making it easier to import and manipulate SVGs as React components
• next-seo - Managing your SEO easier in Next.js