react-components.md

React components

Ladle is nice tool to develop/share react components. How to use Props in React is a good guide.

I now am using Solid for all my web apps and static sites, so trying to port many useful hooks from here for Solid.

Notes

• Design System opinion: Don't make your <Link> and <Button> components support both link and button visuals. Do make your <Link> and <Button> components renders either <a> or <button> based on the props passed to it ("to" should render an anchor, "onClick" should render a button)

Other

• Belle - Configurable React Components with great UX.
• React Table - Hooks for building fast and extendable tables and datagrids for React. (HN)
• Blueprint - React-based UI toolkit for the web.
• Ant Design - UI Design Language.
• kit - Tools for developing, documenting, and testing React component libraries.
• React Spring - Set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs.
• SVGR - Transform SVGs into React components.
• Shopify - Shopify’s product component library.
• react-jsonschema-form - React component for building Web forms from JSON Schema.
• react-dropzone - Simple HTML5 drag-drop zone with React.js
• React Kawaii - Cute React UI Components.
• React Select
• Primer Components - Primer React components.
• react-movable - Drag and drop for your React lists and tables. Accessible. Tiny.
• Semantic UI React - Official Semantic-UI-React integration.
• React Sidebar - Sidebar component for React.
• The Platform - Web API's turned into React Hooks and Suspense-friendly React components.
• Reakit - Toolkit for building really interactive UIs with React.
• libreact - Collection of useful React components.
• React Circular Progressbar - Circular progress indicator.
• React Window - React components for efficiently rendering large lists and tabular data.
• React Flip Toolkit - Utility library for highly configurable layout transitions.
• React Calendar
• Recharts - Redefined chart library built with React and D3.
• Found - Extensible route-based routing for React applications.
• Reuse - Reuse different React components to create new ones.
• React Geosuggest - React autosuggest for the Google Maps Places API.
• loadable-components - React code splitting made easy. Reduce your bundle size without stress.
• react-tiny-virtual-list - Tiny but mighty list virtualization library, with zero dependencies.
• React Morph - Morphing UI transitions made simple.
• React Virtuoso - Simple, easy to use React component made to render huge data lists.
• Tipple - Lightweight dependency-free library for fetching data over REST with React.
• react-component-benchmark - Component to help benchmark React components and their trees.
• react-async-component - Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases.
• react-teleporter - Teleport React components in the same React tree.
• re-resizable - Resizable component for React.
• react-tiniest-router - Tiniest router for React, built with hooks.
• react-content-loader - SVG-Powered component to easily create placeholder loadings (like Facebook cards loading).
• react-hook-form - Performant, flexible and extensible forms with easy to use validation.
• rest-hooks - Delightful data fetching for React.
• Framer Motion - Open source, production-ready animation and gesture library for React. (Web) (Visual debugger for Framer Motion)
• react-highlight-words - React component to highlight words within a larger body of text.
• Hooked-Form - Form library implemented with Hooks.
• stated-bean - Light but scalable state management library with react hooks, inspired by unstated-next.
• Why Did You Render - Monkey patches React to notify you about avoidable re-renders.
• react-day-picker - Flexible date picker for React.
• react-a11y-dialog - React component for a11y-dialog relying on React portals to ease the use of accessible dialog windows in React applications.
• prism-react-renderer - Renders highlighted Prism output to React (+ theming & vendored Prism).
• Naph - React Component for rendering Node Graphs.
• React Spinners - Collection of loading spinner components for react.
• react-teleporter - Teleport React components in the same React tree.
• Stack Styled - Stacking layouts for React.
• Rethinking Navigation - Exploration of a component-first API for React Navigation for building more dynamic navigation solutions.
• craft.js - React Framework for building extensible drag and drop page editors.
• React Iframe - Simple solution for using iframes in React.
• clack-react - Provides two React components that enable keyboard shortcuts in React.
• React Wizard Primitive - React wizard primitive - built with hooks.
• console-feed - Captures console.log's into a React Component.
• react-json-view - React component for displaying and editing javascript arrays and JSON objects.
• react-suspense-router - React Router for React Suspense and Render-as-You-Fetch.
• react-range - Range input with a slider. Accessible. Bring your own styles and markup.
• react-markdown - Renders Markdown as pure React components.
• React Stripe.js - React components for Stripe.js and Stripe Elements.
• React Split Pane - React split-pane component.
• react-soft-slider - Simple, fast and impartial slider.
• restful-react - Consistent, declarative way of interacting with RESTful backends, featuring code-generation from Swagger and OpenAPI specs.
• Iconify - Modern open source SVG alternative to glyph fonts.
• Formsy - Form input builder and validator for React.
• React Frontload - Async data loading for React components, on client & server. (Docs)
• stop-runaway-react-effects - Catches situations when a react use(Layout)Effect runs repeatedly in rapid succession.
• react-zoom-pan-pinch - Super fast and light react npm package for zooming, panning and pinching html elements in easy way.
• ReactShadow - Utilise Shadow DOM in React with all the benefits of style encapsulation.
• React GridList - Virtual-scrolling GridList component based on CSS Grids.
• React Charts - Simple, immersive and interactive charts for React.
• Spinners React - Lightweight SVG/CSS spinners for React.
• hamburger-react - Animated hamburger menu icons for React.
• react-see-through - Draw attention to the important parts of your website.
• react-error-boundary - Simple reusable React error boundary component.
• Eitherx - Super simple, reusable either-or error boundaries for React.
• Motion Layout - Beautiful immersive React hero animations.
• React Focus Lock - Browser friendly focus lock.
• Bedrock - Foundational Layout Primitives for your React App.
• React-Focus-On - Solution for WAI ARIA compatible modal dialogs or full-screen tasks.
• downshift - Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components.
• Muuri-React - React implementation of the amazing Muuri layout engine.
• react-flow-diagram - Batteries included React Component for rendering, creating and editing Diagrams.
• react-diagrams - Super simple, no-nonsense diagramming library written in react that just works.
• React Flow - Library for Rendering Interactive Graphs. (Article) (HN) (HN 2) (Web)
• React Flow Chart - Flexible, stateless, declarative flow chart library for react.
• react-polymorphic-types - Zero-runtime polymorphic component definitions for React.
• react-scroll-percentage - Monitor the scroll percentage of a component inside the viewport, using the IntersectionObserver API.
• react-magnifier - React image zoom component.
• ReactReparenting - Reparenting tools for React. (Web) (Article)
• windups - Typewriter effect library for React. (Web)
• React Shimmer - Async loading, performant Image component for React.js.
• react-textarea-autosize - Drop-in replacement for the textarea component which automatically resizes textarea as content changes.
• Caldera - Server-side execution environment for React.
• react-tooltip - React tooltip component.
• react-sortable-pane - Sortable and resizable pane component for React.
• gooey-react - Gooey effect for React, used for shape blobbing. (Web)
• konva-grid - Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets.
• react-spring-lightbox - Flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
• React-Toastify - React notification made easy.
• React Ranger - Hooks for building range and multi-range sliders in React.
• react-simple-maps - Create beautiful SVG maps in react with d3-geo and topojson using a declarative api.
• SWR + Firestore - Implement Vercel's useSWR for querying Firestore in React/React Native/Expo apps.
• react-collapse-pane - Splittable, draggable, collapsible panel layout library.
• FlexLayout - Multi-tab layout manager.
• Formik - Build forms in React, without the tears. (Formik vs Plain React for Forms – Worth it?) (Formik Devtools)
• FullCalendar - Full-sized drag & drop JavaScript event calendar.
• React DnD - Drag and Drop for React. (The secret is it’s just one flat list with pointers and css to make it look nested) (Multi List Drag and Drop With react-beautiful-dnd, Immer, and useReducer) (Docs) (react-dnd-accessible-backend)
• react-smooth-dnd - React wrapper components for smooth-dnd.
• FullCalendar - Official React component for FullCalendar.
• React Cookies - Load and save cookies within your React application.
• react-sortablejs - React component built on top of the mature drag and drop library, Sortable.
• Reactive - Reactive approach to create React application.
• react-recaptcha - React.js reCAPTCHA for Google.
• React-Chrono - Modern Timeline component for React. (HN)
• react-force-graph - React component for 2D, 3D, VR and AR force directed graphs.
• jsxui - Primitive elements to build isomorphic user interfaces in React.
• raam - Beautifully boring cosmetic-free primitives for structure and layout. (Web)
• Notistack - Highly customizable notification snackbars (toasts) that can be stacked on top of each other.
• React Hotkey Tooltip - Global Hotkey provider with built in tooltip for React.
• react-contenteditable - React component for a div with editable contents.
• use-tweaks - Tweak React components with Tweakpanes.
• repng - React component to PNG converter, built with Puppeteer.
• react-calendly - Calendly integration for React apps.
• react-s3-uploader - Provides a React component that automatically uploads to an S3 Bucket.
• beautiful-react-diagrams - Tiny collection of lightweight React components for building diagrams with ease.
• Rough Charts - Responsive, composable react charting library with a hand-drawn style.
• React iOS Corners - iOS like border-radius corners react component.
• React Insta Stories - React component for Instagram like stories.
• Reapop - Simple and customizable React notifications system.
• react-responsive-modal - Simple responsive react modal.
• Graph editor - React component which enables creating flow editors with ease.
• React Lite YouTube Embed
• Lioness - React library for efficiently implementing Gettext localization.
• React Command Palette - Accessible browser compatible javascript command palette.
• React Leaflet - React components for Leaflet maps.
• React ApexCharts - React.js wrapper for ApexCharts to build interactive visualizations in react.
• dnd kit - Modern drag and drop toolkit for React. (Web)
• react-archer - Draw arrows between DOM elements in React.
• React Layout Components - Layout components for React, primarily inspired by Every Layout.
• React Popper - React wrapper around Popper tooltip library.
• react-overlays - Utilities for creating robust overlay components.
• suspendable - Utilities to create resources that can suspend in React.
• Procedural GL React - React component for the Procedural GL JS library. (HN)
• Renderlesskit React - Headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System.
• react-virtualized-tree - Virtualized tree view component making use of react.
• Glide Data Grid - High-performance React grid component, with rich rendering and first-class TypeScript support. (Reddit)
• React Colorful - Tiny color picker component for React and Preact apps.
• Homebase React - Graph database for delightful React state management.
• react-svg - React component that injects SVG into the DOM.
• Gitalk - Modern comment component based on GitHub Issue and Preact.
• Mafs - React components for math visualization. (Docs) (Web)
• react-masonry-css - React Masonry layout component powered by CSS, dependency free.
• Bumbag - Friendly React UI Kit suitable for MVPs or large-scale applications. (Code)
• ractive-player - Library for interactive videos in React. (Web)
• Slang - Theme-able react component library for fast UI development.
• React-Menu - Accessible, responsive, and customizable React menu library.
• Leva - React-first components GUI.
• react-ast - Render abstract syntax trees using react.
• Chakra-UI AutoComplete - Accessible Autocomplete Utility for Chakra UI that composes Downshift ComboBox.
• Supabase UI - React UI library.
• Reactjs-popup - React Popup Component - Modals, Tooltips and Menus. All in one.
• use-click-outside - React hook to detect clicks outside of the components. With shadow DOM support.
• Playground - HTML, CSS and JS demonstration component that runs entirely in the browser and does not require loading any third party sites.
• JSON Schema Viewer
• Inspx - Pixel perfect layout inspection.
• Embrace - Typesafe, declarative, and composable UI engine on top of React and Focal.
• React ECS - Declarative Entity Component System for React.
• Replay - React video player facilitating adaptive stream playback with custom UI and a React-friendly API.
• candycode/elements - Basic ingredients for baking custom React components spiced with spring physics.
• Mantine - React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience. (Web) (Reddit)
• re-position - Drag, resize, and rotate all in one flexible React component.
• masonic - High-performance masonry layouts for React.
• react-loosely-lazy - Use advanced React async components patterns today.
• Supabase Grid - React component to display your PostgreSQL table data.
• threaded-comments - Reddit styled threaded comments using Supabase and Next.js.
• Nano Stores - Tiny (198 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores. (Tweet)
• React Lazy Hydration - Lazy Hydration for Server Rendered React Components.
• React Super Command - Sleek command line modal for React apps.
• React Complex Tree - Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop.
• react-easy-sort - React component to sort items in lists or grids.
• ReactToPrint - Print React components in the browser.
• react-calendar - Headless Calendar UI Library based plugin system.
• React Aspen - Most advanced nested tree renderer for React apps.
• react-map-interaction - Add map like zooming and dragging to any element.
• Remount - Mount React components to the DOM using custom elements.
• React Scroll Parallax - React components to create parallax scroll effects for banners, images or any other DOM elements.
• react-xarrows - Draw arrows between components in React.
• react-code-blocks - React components for rendering code snippets with syntax highlighting.
• reaflow - React library for building workflow editors, flow charts and diagrams.
• React Financial Charts - Charts dedicated to finance.
• ReactPlayer - React component for playing a variety of URLs.
• Vechai UI - Collection of Accessible React UI Components using TailwindCSS. (Docs)
• vazco/uniforms - Set of React libraries for building forms from every schema. (Web)
• React Fullscreen Image - Accessible, fast, and snappy full screen React image viewer.
• React Sizeme - Make your React Components aware of their width and height.
• NextUI - Beautiful, fast,modern React UI Library. (Code)
• React Date Picker - Simple and reusable Datepicker component for React. (Web)
• focus-trap-react - React component that traps focus.
• react-embed - Embed 3rd party widgets.
• Choc UI - Prebuilt Chakra UI Higher Order Components. (Web)
• LottiePlayer - Lottie web player as a react component.
• React Autosuggest - WAI-ARIA compliant React autosuggest component.
• react-chartjs-2 - React wrapper for Chart.js.
• replicache-react - Miscellaneous utilities for using Replicache with React.
• ClickableBox - React component to add onClick to HTML elements without sacrificing accessibility.
• react-intersection-observer - React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
• react-ux-form - Simple, fast, and opinionated form library for React & React Native focusing on UX.
• React Overlay Trigger - Auto repositioning overlay component for react. (Article)
• Nice Modal - Small, zero dependency utility to manage modals in a natural way for React.
• React InfiniteGrid - React component that can arrange items infinitely according to the type of grids.
• React-Location - Enterprise Client-Side Routing for React. (Docs)
• tldraw/core - TLDraw core renderer and utilities.
• React Freeze - Prevent React component subtrees from rendering. (Experimenting with React Freeze)
• react-ancenstry - Get the component ancestry in React.
• typeahead - Small, fast, opinionated autocomplete input for React.
• co-media - React library for accessing browser media like camera, microphone, screen capture, etc.
• React Responsive Carousel - React.js Responsive Carousel (with Swipe).
• Theme Provider - Set of utilities that help you create your own React theming system in few easy steps.
• Splitter - React component for building split views like in VS Code.
• React-Transition-State - Perform animation and transition of React component with ease.
• Graphire - Declarative and unopinionated graph visualization library for React.
• React Flow Smart Edge - Special Edge for React Flow that never intersects with other nodes.
• rci - Better code inputs for the web.
• Formiz - React forms with ease! Composable, headless & with built-in multi steps.
• restack - SwiftUI inspired layouts for React.
• react-rewards - Microinteractions you can use to reward your users for little things and make them smile.
• Informed - Lightweight framework and utility for building powerful forms in React applications.
• react-lineto - Draw a line between two elements in React.
• Hacky - Functional component-based UI library.
• Charts.css React
• Editable React Table - React table built to resemble a database.
• React Layers Manager - Manage layers and z-index in React applications effectively.
• chakra-react-select - Chakra-ui wrapper for the popular select library react-select.
• Formily - Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3.
• React Feather Icons
• react-i18next - Internationalization for react done right. Using the i18next i18n ecosystem.
• yandex/ui - Yandex UI Kit build on React and bem-react.
• iframe-resizer-react - Enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content.
• React Table Library
• React Zorm - Type safe <form> for React using Zod.
• LYTS - Layout primitives for React. (Tweet)
• Rough Notation React
• React Lazylog - React component that loads and views remote text in the browser lazily and efficiently.
• react-spring-bottom-sheet - Built on top of react-spring and react-use-gesture.
• react-photoswipe-gallery - Configurable and flexible React component wrapper around PhotoSwipe.
• React-Resizable - Simple React component that is resizable with a handle.
• React Loading Skeleton - Make beautiful, animated loading skeletons that automatically adapt to your app.
• react-aria-components - Prototype of a higher level component-based API on top of React Aria.
• react-layout - Layout primitives for React, including Box, Cluster, Grid, Row, Column, and Layer.
• UI Kit for Cube Cloud - UI Framework for Cube Projects. Based on React Aria.
• React tags - Simple tagging component for your projects.
• rich-textarea - Small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.
• react-cursor-chat - React component helps bring Figma's Cursor Chat to your web applications.
• heart-switch - Heart-shaped toggle switch component for React.
• react-select-search - Lightweight select component for React.
• react-portabletext - Render Portable Text with React.
• Fomir - Schema-First Form Library. (Docs)
• react-tree - Hierarchical tree component for React in Typescript.
• React Awesome Shapes - Insert Awesome Shapes into Your React Site with Ease.
• React Photo View - Exquisite React photo preview component.
• React H5 Audio Player - React audio player component with UI. It provides time indicator on both desktop and mobile devices.
• react-ansi-dumi - Foldable and searchable ansi log viewer for React.
• Interweave - React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
• React Cool Img
• spacefold - Use Pub/Sub pattern inside your React applications easily.
• React Resize Detector - Cross-Browser, Event-based, Element Resize Detection for React.
• react-spline - Allows you to export and use Spline scenes directly in your React websites.
• React Use Intercom - React Intercom integration powered by hooks.
• React Arborist - Sortable, virtual, customizable tree component for React. (HN)
• Stream Chat React SDK - React components for Stream Chat, a service for building chat applications.
• Allotment - React split-pane component.
• react-helmet-async - Thread-safe Helmet for React 16+ and friends.
• compose-providers - Compose your React provider components to avoid boilerplates.
• GitLanding - Create a beautiful landing page for your GitHub projects.
• react-text-loop-next - Animate words in your headings.
• react-map-gl - React friendly API wrapper around MapboxGL JS.
• Formspree React - React component library for Formspree.
• rediagram - Markup and draw your system diagrams with React.
• react-modal - Accessible modal dialog component for React.
• React Terminal - React component that renders a Terminal.
• ReactSSML - Utilize the full power of React to develop voice UIs.
• Tiny UI - Friendly UI Component Set for React.
• React Spotify Web Playback SDK - React wrapper for Spotify Web Playback SDK.
• Font Picker for React - Font selector component for Google Fonts.
• dayzed - Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components.
• React Infinite Scroll - Awesome Infinite Scroll component in react.
• React Fast Marquee - Lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.
• React Mentions - React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
• Selecto.js - Component that allows you to select elements in the drag area using the mouse or touch.
• React RND - Resizable and draggable component for React.
• React Motion Router - Declarative routing library for React with page transitions and animations.
• React Square Web Payments SDK - Easily create PCI-compliant inputs to accept payments online with the Square Payments API.
• React Page Visibility - Declarative, nested, stateful, isomorphic page visibility for React.
• React Idle Timer - User activity timer component. (Web)
• React Forked DND - Beautiful and accessible drag and drop for lists with React.
• React in out text area - Simple React.js component that is like Google Translate.
• Reakit - Toolkit for building accessible web apps with React. (Code)
• Reagraph - High-performance network graph visualization built in WebGL for React.
• Reactour - Set of Assistants to travel into your React Components.
• react-responsive - CSS media queries in react - for responsive design, and more.
• React Socks - React library to render components only on specific viewports.
• Planby - React based component that lets you implement your own Timeline so fast and simple. (Web)
• lil UI components (Code)
• Formation - 20+ react-based UI components. (Code)
• Frogress - Line Progress Bar UI for React. Natural color gradients & Coherent border rounding.
• react-easy-crop - React component to crop images/videos with easy interactions.
• React-CMD-K - Fast, accessible, and pretty command palette for React.
• React Lottie Player - Fully declarative React Lottie player.
• React Keyboard Navigator - Suite of React components and hook for selecting sibling components through the keyboard.
• React Local Toast - Local toast helps you to provide feedback related to particular components on page.
• React Lite YouTube Embed - Private by default, faster and cleaner YouTube embed component for React applications.
• KMenu - Animated and accessible command menu.
• Foldable - Fully automated and animated Collapse primitive.
• Tunnel-Rat - Potential cross renderer portal.
• CmdK - Fast, unstyled command menu React component. (Web)
• graphviz-react - React component for displaying Graphviz graphs.
• Bright - React Server Component for syntax highlighting.
• React Just Parallax - React library for scroll and mousemove parallax effect. Open source, production-ready.
• json-viewer - React component for JSON viewer, but not only a JSON viewer.
• Tremor - React library to build dashboards fast.
• Rive React - React runtime for Rive.
• daisyUI React - daisyUI components built with React, Typescript and TailwindCSS.
• React Modern Audio Player - Simple, accessible and flexible audio player. (HN)

Links

• Awesome React Components
• create-react-library - CLI for easily publishing modern React libraries with Rollup and example usage via create-react-app.
• Awesome React Render Props - Awesome list of React components with render props.
• Better Reusable React Components with the Overrides Pattern (2018)
• React Cosmos - Dev tool for creating reusable React components. (Web) (HN)
• Uibook - Lightweight tool for React components visual testing with media queries.
• Storybook - Open source tool for developing UI components in isolation for React, Vue, and Angular. (Code)
• StoryCruise - Render stories (from Storybook) with Snowpack.
• React Libraries in 2020
• new-component - Simple, customizable utility for adding new React components to your project.
• React View - Interactive playground, documentation and code generator for your components.
• Anatomy of a Typed React Component (2020)
• Keeping up with React Libraries (2020)
• Scroll a React component into view (2020)
• Reusable Components Styleguide - Tips and tricks for making components shareable across different projects (framework agnostic).
• reactivue - Use Vue Composition API in React components.
• Vitro - Build and showcase your react components in isolation. (Web)
• Components: react-aria (2021)
• Not All Components Are Created Equal (2021)
• How We Built React Components for Any Front End (2021)
• Designing a Dataflow Editor With TypeScript and React (2021)
• Avoid global state — Colocate with Uncontrolled Compound Components (2021)
• Are you a component control freak? (2019)
• A Smarter, Dumb Breadcrumb (2019)
• Compound Components (2019)
• react-scanner - Statically analyzes the given code (TypeScript supported) and extracts React components and props usage.
• Refine - React-based framework for building data-intensive applications in no time. (Code)
• Good React charting libraries (2021)
• Converting a React component to TypeScript (2021)
• Agrippa - React CLI for component generation.
• Awesome React Headless Components
• preactement - Create a custom element from any Preact component.
• Advice on JSX Conditionals (2022) (HN)
• React Runner - Run your React code on the go.
• react-extras - Useful components and utilities for working with React.
• react-worker-components-plugin - Plugin that renders components in web workers and not in the main thread.
• React Fast Accordion - Dynamic, fast & zero dependency accordions for React. (Reddit)
• LocatorJS - Click on any component to go to code. (Code)
• Ladle - Environment to develop, test and share your React components faster. (Web) (Intro)
• How to use Props in React (2022)
• From Rust to TypeScript: Lifetime Analysis for React Component Architecture (2022) (Tweet)
• How to Detect Long Press Gestures in JavaScript Events in React (2022)
• Click to Component - Option+Click React components in your browser to instantly open the source in VS Code.
• React Primer Scripts - Toolchain to help build React components with Primer.
• Placeholder components
• reforest - Collect and compute React props seamlessly across the server and client.
• react-benchmark - Tool for benchmarking the render performance of React components.