react-draggable is a mature, well-maintained React library that provides two components for making elements draggable: `<Draggable>` (a high-level, state-managed component that applies CSS transforms) and `<DraggableCore>` (a low-level, stateless primitive that fires raw drag events). The library handles mouse and touch events, supports axis constraints, bounds (parent, selector, or numeric), grid snapping, scaling, and controlled/uncontrolled position modes. It uses CSS transforms for positioning, avoiding conflicts with CSS layout. The codebase was recently migrated from Flow to TypeScript (v4.6.0), ships CommonJS, ESM, and UMD builds, and includes a comprehensive test suite (unit tests in jsdom + browser tests via Puppeteer). The architecture is clean: `Draggable` wraps `DraggableCore`, adding state management and transform application, while utility modules (`domFns`, `positionFns`, `getPrefix`, `shims`) handle DOM operations, position calculations, browser prefix detection, and general helpers. The library is actively maintained with recent commits, a thorough CI pipeline, and detailed documentation including a CSP nonce feature and React 19 compatibility.
This is a production-grade React library that wraps Airbnb's lottie-web to render After Effects animations. It provides declarative React components (<Lottie>, <LottieSvg>, <LottieLight>), hooks (useLottie, useLottieSvg, useLottieLight), a full player UI with play/pause/seek/speed controls (LottieControls), and an interactivity layer for scroll-driven or visibility-triggered animations. The library ships three build variants optimized for bundle size, all with 100% statement coverage and strict TypeScript types. It supports both React 18 and 19, is SSR and React Server Component safe, and enforces per-import size budgets via CI. The codebase demonstrates an unusually rigorous engineering culture with no technical debt shortcuts.
GraphQL Voyager is an interactive GraphQL schema explorer that visualizes any GraphQL API as an interactive graph. It consumes GraphQL introspection data (or SDL) and renders a navigable representation of the schema's types, fields, and relationships using Graphviz and SVG. The application is built with React and TypeScript, offering multiple consumption methods: a standalone bundle for direct browser use, an NPM package for integration with bundlers like Webpack, and middleware adapters for Express, Hapi, and Koa frameworks. The core functionality involves processing introspection JSON to extract type information, filtering out internal types (like Relay) and deprecated fields, and constructing a graph where nodes represent GraphQL types and edges represent relationships (such as field types). This graph is rendered via a Graphviz worker, with the resulting SVG enhanced for interactivity (tooltips, pan/zoom, click-to-explore). A companion documentation panel allows users to inspect details of selected types, including fields, arguments, and directives. Beyond the visualization, Voyager includes several reusable utilities that demonstrate thoughtful engineering: an LRU cache implemented in localStorage for efficient SVG rendering caching, a React hook for managing promise states (loading, error, success), and a flexible object matching utility. The project maintains a robust development workflow with TypeScript, Webpack, Playwright end-to-end testing (via Docker), and automated dependency updates via Dependabot. Recent commits indicate active maintenance, and the codebase adheres to modern React and TypeScript practices.
Kea is a state management library for React applications that builds on Redux to reduce boilerplate while maintaining flexibility. It features a lazy-loading logic system where logic (actions, reducers, selectors) is only built and mounted when needed. The library provides a plugin system for extending functionality, sophisticated listener handling with breakpoint support for asynchronous flows, and React hooks for accessing state and actions in components. Kea's architecture centers around a context-based system that manages logic instances, their dependencies, and their connection to the Redux store.
This repository provides a React component for international phone number input. It allows users to select a country from a dropdown (with flag icons) and input a phone number, which is formatted and validated according to the selected country's numbering plan. The component supports various formats (national, international) and integrates with popular form libraries like React Hook Form. It is built with a modular architecture, separating concerns into distinct components for country selection, input handling, and utility functions for phone number parsing and formatting. The library emphasizes reusability and customization through props that allow overriding components (input, country select, flags), providing custom metadata, and adjusting behavior (e.g., making the country calling code non-editable). It includes comprehensive TypeScript definitions and supports multiple distribution formats (ESM, CJS, UMD).
JSON Crack is an open-source, browser-based tool for visualizing, formatting, converting, and exploring JSON, YAML, CSV, and XML data as interactive graphs. The monorepo (Turborepo) contains four workspaces: a Next.js web app (apps/www) that provides the full editor experience with a Monaco-based text editor, split-view layout, graph canvas, and various utility modals (jq, JSONPath, schema validation, code generation); a VS Code extension (apps/vscode) that embeds the same graph view as a webview panel; a Chrome extension (apps/chrome-extension) that injects a 'Raw'/'Graph' toggle on any JSON page; and a reusable React component package (packages/jsoncrack-react) that exposes `JSONCrack` as a standalone component along with a `parseGraph` utility and TypeScript types. All data processing happens client-side — the app is a fully static Next.js export served behind NGINX. The architecture is frontend-only, relying on Zustand for state, reaflow for graph layout, react-zoomable-ui for pannable/zoomable canvas, and jsonc-parser for AST-driven parsing. The codebase is well-organized, with clear separation of concerns, good TypeScript coverage, and unit tests in the core package.
react-zoom-pan-pinch is a production React library (npm package, zero runtime dependencies beyond React) that adds zoom, pan, and pinch interactions to arbitrary HTML content. In production, TransformWrapper mounts a ZoomPanPinch imperative core instance that registers DOM event listeners (wheel, touch/pointer, keyboard) and shares state via React context; TransformComponent renders children with a CSS transform (translate/scale or configurable matrix) driven by that state. The data flow is: browser events → gesture handlers → state/bounds mutation → CSS transform on the content node, with ResizeObserver-driven recalculation when wrapper or content dimensions change. The package is consumed internally as: TransformWrapper/TransformComponent, auxiliary MiniMap, KeepScale, and Virtualize components, six hooks (useControls, useTransformEffect, useTransformInit, useTransformContext, useTransformComponent, useZoomPanPinch), and an imperative API (zoomIn, zoomOut, setTransform, resetTransform, fitToView, zoomToElement, panBy, clientToContent/contentToClient) exposed via ref, render props, or hooks.
Creepyface is a JavaScript library that makes HTML images follow the pointer (mouse/finger/touch) by switching between different angled images. It consists of a core library, React and custom element wrappers, and point provider plugins for dance, firefly, and tilt tracking. The repository also includes a Next.js website that demonstrates the library and allows users to create and share their own creepyfaces. The architecture uses a monorepo with Lerna/Yarn workspaces, featuring a clean separation between the core library logic, UI wrappers, and the demonstration site with its own backend for image processing and storage.
This repository is a Next.js library for Cloudinary integration, providing React components and utility functions for image/video optimization, uploads, and transformations. The library includes components like CldImage (Next.js Image wrapper), CldVideoPlayer, CldUploadButton/Widget, and CldOgImage, along with URL generation helpers. It supports both Pages and App Router, handles responsive images, placeholders, and Cloudinary-specific features like AI transformations. The architecture is modular with clear separation between components, helpers, loaders, and configuration. The library is actively maintained with semantic-release, comprehensive tests, and broad Next.js/React version support.
This is a small, focused React component library that wraps the native ResizeObserver API. It provides a declarative component (`<ResizeObserver>`) that can observe a single child element for size changes, supporting both direct children and render-prop patterns for cases where the observed element is not the immediate child. A `Collection` component uses React context and microtask batching to aggregate multiple resize events from child observers into a single callback, improving performance when many elements are observed. The library also exports a `useResizeObserver` hook for imperative use. Internally, it manages a single shared `ResizeObserver` instance with a map of element-to-callback sets, ensuring efficient resource usage. The code is clean, well-typed, and properly tested, making it a reliable building block for responsive UIs. As part of the Ant Design ecosystem, it follows established patterns and integrates smoothly with other @rc-component packages.
This repository is a React library that provides components and hooks for integrating the Kakao (formerly Daum) postcode service into React applications. It offers two primary interfaces: a embeddable component (`KakaoPostcodeEmbed`) that renders the postcode search UI directly in the page, and a custom hook (`useKakaoPostcodePopup`) that returns a function to open the service in a popup window. The library handles asynchronous loading of the Kakao postcode script, manages the service lifecycle via callbacks, and provides TypeScript definitions for the address data returned by the service. The core functionality revolves around dynamically loading the external Kakao postcode script and initializing it with user-provided options.
react-dropdown-tree-select is a React component library that provides a dropdown interface for selecting items from hierarchical tree data. The component supports multiple selection modes (multi-select, simple select, radio select, and hierarchical), displays selected items as tags/pills, includes search functionality with progressive filtering and debouncing, offers keyboard navigation, and implements accessibility features through ARIA attributes. The architecture centers around a DropdownTreeSelect component that uses a TreeManager to handle tree state and operations, with supporting components for rendering trees, nodes, tags, and controls. Performance optimizations include virtualized rendering via react-infinite-scroll-component, search debouncing, and progressive filtering that reduces search scope with each keystroke.
This repository is a React component library for embedding Cloudflare Stream video players. It provides a `<Stream>` component that handles loading the Cloudflare Stream SDK, creates an iframe for the player, and synchronizes React props with the player's imperative API. The architecture centers around custom React hooks for script loading (`useStreamSDK`), property synchronization (`useProperty`), and event management (`useEvent`). The component is designed to be used in React applications, with props controlling video playback, appearance, and event handling. External dependencies include React (peer dependency) and the dynamically loaded Cloudflare Stream SDK.
This repository provides `react-photo-view`, a React component library for image and custom element preview with touch gestures, animations, and keyboard navigation. The library exposes three primary components: `PhotoProvider`, `PhotoView`, and `PhotoSlider`. `PhotoProvider` manages a group of images via React context, tracks visibility and index, and renders a `PhotoSlider` portal. `PhotoView` registers individual images or custom render nodes with the provider and handles thumbnail click/double-click triggers. `PhotoSlider` renders a full-screen overlay with a backdrop, swipeable carousel, zoom/pan/drag support, and optional toolbar/overlay customizations. The architecture is monolith-like within the library but decoupled through context and custom hooks. Key entry points are the `PhotoProvider` wrapper and `PhotoView` child components. External dependencies include React 16.8+ and ReactDOM. The codebase demonstrates strong craftsmanship: physics-based scrolling, debounced/tap gesture handling, and modular utility functions. No unit tests are present, and TypeScript version (4.9) and some dependency versions are slightly behind current, but the library is actively maintained and functional.
echarts-for-react is a React component library that provides a declarative wrapper around Apache ECharts, a popular JavaScript charting library. The core component manages the full lifecycle of an ECharts instance: initialization, option updates, event binding, theme switching, resize handling, and loading states. It exposes a `getEchartsInstance()` method for direct access to the underlying ECharts object. The library supports both Canvas and SVG renderers, custom themes, and locale configuration. It includes a `core` export for tree-shaking with ECharts modules, allowing bundle size optimization. The codebase is primarily TypeScript, uses class components (PureComponent), and depends on `size-sensor` for automatic resize detection and `fast-deep-equal` for prop comparison. It is a typical React wrapper library—well-structured for its purpose but not architecturally innovative. The project is actively maintained with recent commits and a responsive issue tracker.
react-sortable-tree is a React component library that provides a drag-and-drop sortable tree view for hierarchical data. It renders nested arrays of nodes with expand/collapse, virtualization via react-virtualized, search with highlighting, theming, and extensive callback hooks for move and visibility changes. The library is not actively maintained; the last release was in 2020, and the README explicitly disclaims maintenance. The codebase is well-architected with clean separation of concerns: pure tree-data utility functions (walk, map, insertNode, etc.) separated from React rendering, a DndManager class that wraps react-dnd, and a theming system. Despite its staleness, the core tree manipulation algorithms are high-quality and extractable for other projects. The library depends on outdated versions of React (16) and react-dnd (11), and uses react-virtualized instead of the more modern react-window.
This repository is a curated list of React components and libraries. It is not a software application, data pipeline, or library in the traditional sense. It is a Markdown-based document (README.md) containing categorized links to open-source React projects, with a GitHub Actions workflow that auto-generates the table of contents on push/PR. The only executable code is a single GitHub Actions workflow file (`.github/workflows/update-table-of-contents.yml`) that runs the `technote-space/toc-generator` action to keep the TOC in sync with the Markdown headers. The repository's value is purely as a reference document — it contains no application logic, no reusable code components, no tests, no package manifests, and no build system. The README itself is a large Markdown file with categorized links to React libraries, maintained through a contribution policy that requires removing an existing entry for every new addition to keep the list fresh. The CI workflow is minimal and standard — it checks out the repo and runs a third-party TOC generator action. There is no custom code to evaluate for craftsmanship or reusability.