@yudiel/react-qr-scanner is a React library for scanning QR codes and barcodes using the device camera. It implements a layered hook architecture where `useCamera` manages low-level camera access and settings via a task queue pattern to prevent race conditions, `useScanner` implements the barcode detection loop using requestAnimationFrame with configurable timing and duplicate detection, and `useDevices` enumerates available video input devices. The main `Scanner` component orchestrates these hooks, handles coordinate transformation from video resolution to display space for accurate overlay rendering, and provides optional UI components for camera controls (torch, zoom, on/off). The library handles browser-specific quirks like the torch/zoom constraint conflict on mobile devices and provides robust error mapping for camera access issues.
The Floating UI repository is a comprehensive library for creating accessible and customizable floating UI components, such as tooltips, popovers, and dropdowns. It offers a set of low-level features to help navigate the challenges of building accessible floating UI components. The library is built with a focus on accessibility, modularity, and flexibility, and is suitable for use in a variety of applications.
react-spring is a spring-physics-first animation library for React, providing a cross-platform animation engine that targets both the DOM (via @react-spring/web) and React Three Fiber (via @react-spring/three). The library is built on a layered architecture: a custom requestAnimationFrame scheduler (rafz), a shared utilities layer (FluidValue observables, color/string interpolation, easing functions), an animated value system (Animated, AnimatedValue, AnimatedString), a core animation engine (Controller, SpringValue, Interpolation), and target-specific adapters that inject renderer behavior via Globals.assign and createHost. The public API consists of declarative hooks (useSpring, useSprings, useTrail, useTransition, usePresence, useChain, useScroll, useResize, useInView), imperative controls (SpringRef), and low-level components (Spring, Trail, Transition). The library is published as a monorepo with 12 npm packages, all version-locked and released via changesets. The repository also includes a comprehensive documentation site built with React Router 7, MDX, and Vanilla Extract, plus a demo app with 30+ interactive sandboxes. The codebase is extensively tested with unit tests (Vitest browser mode), type-level tests, and E2E tests, using a custom mock-raf for deterministic animation testing. The architecture emphasizes performance on the hot path, target-agnostic core logic, and a strict bottom-up dependency graph (rafz → shared → animated → core → targets).
Lexical is a modular, extensible rich text editor framework designed for building customizable text editors in web applications. It features an immutable state model with built-in undo/redo, real-time collaboration via Yjs integration, and a plugin-based architecture for extensibility. The framework provides core editing functionality including text manipulation, selection handling, and DOM rendering, along with specialized features for tables, lists, code blocks, equations, and accessibility. Built with TypeScript and supporting React, vanilla JS, and headless environments, Lexical emphasizes reliability, performance, and developer experience through comprehensive testing and documentation.
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 is a production-grade React calendar component library (`@ilamy/calendar`) designed as a lightweight (~13 KB gzipped) replacement for FullCalendar. It provides month, week, day, year, and agenda views with drag-and-drop, resource scheduling, RFC 5545 recurring events, iCal export, and internationalization. The core ships no CSS and relies on Tailwind CSS v4 with shadcn/ui tokens, making it themeable and tree-shakeable. Architecturally, the library follows a plugin-first pattern: the core implements a pluggable kernel (`IlamyPlugin` interface) that accepts opt-in plugins for recurrence, agenda, and drag-to-create. Each plugin contributes views, event transformations, mutation scopes, and UI slots through a runtime composer. The state management uses a single `CalendarProvider` context that composes four engine slices (config, navigation, data, interaction). The view system is built on two grid primitives (vertical-grid for time-based layouts, horizontal-grid for date-based layouts) that are shared across all views and test harnesses. The codebase demonstrates strong engineering discipline: a huge unit test suite (995+ tests) with regression pinning against issue numbers, deterministic Playwright E2E tests, a CI pipeline with lint/build/type-check/test gates, and agent-driven code review skills. However, there is some duplication of UI primitives between packages, and the dependency on a custom dayjs wrapper for timezone handling introduces fragility. The library is actively maintained with frequent releases and detailed changelogs.
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.
axios-hooks is a React library that provides custom hooks for making HTTP requests using axios, with built-in caching, request cancellation, server-side rendering (SSR) support, and configurable defaults. The library exposes a default `useAxios` hook and a `makeUseAxios` factory to create pre-configured instances with custom axios versions, cache implementations, and default options. The hook manages request lifecycle through React's `useReducer`, automatically executes requests on component mount (unless `manual` is true), and supports manual refetch with optional cache usage. It integrates with `lru-cache` for response caching, allowing both client-side caching and SSR hydration via `serializeCache`/`loadCache`. The architecture is a single-component library with a clean API surface. Key entry points are the default export `useAxios` and named exports `configure`, `makeUseAxios`, `loadCache`, `serializeCache`, and `clearCache`. The primary data flow is: component calls `useAxios(config, options)`, which triggers an axios request (with optional cancellation via `AbortController`), stores the response in cache, and updates component state (`loading`, `data`, `error`, `response`). External dependencies are `axios` (peer), `react` (peer), `lru-cache`, and `dequal` for deep equality checks. The library is well-tested with Jest and includes TypeScript type definitions. The code exhibits quality engineering practices: proper use of React hooks (useMemo, useCallback, useRef, useReducer), deep comparison memoization to avoid unnecessary re-renders, abort controller for request cancellation, and a factory pattern (`makeUseAxios`) that enables multiple independent hook instances. The test suite covers edge cases like cancellation, cache behavior, SSR, and option change detection.
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.
This is a TypeScript-first React library (`react-unity-webgl`) that embeds Unity WebGL builds into React applications. The `module/source` directory contains the actual npm package: a `Unity` forward-ref component that mounts a canvas and manages the Unity instance lifecycle, plus custom hooks (`useUnityContext`, `useUnityLoader`, `useEventSystem`, `useUnityMetricsInfo`) that encapsulate script loading, two-way Unity↔React event bridging, fullscreen/pointer-lock/screenshot controls, and performance metric polling. The repo is a monorepo with a Docusaurus documentation site (versioned v5 through current) and a Vite + React integration-test harness backed by two prebuilt Unity test projects (2022.1 and 6000.1). Architecturally, Unity instances push events to React through a global `dispatchReactUnityEvent` function wired into the hook-level event system; React sends messages back through `UnityInstance.SendMessage`. The library has no runtime dependencies beyond React peer support, relying on Unity's generated loader/framework/wasm output and on browser WebGL, IndexedDB, and sensor APIs. A notable implementation detail is a cleanup-on-unmount routine that swaps in a temporary detached canvas to safely call Unity's `Quit()` method. The codebase is well organized and strongly typed, with clear separation between components, hooks, and types. CI workflows for CodeQL, module validation, and documentation validation are present, and the last commit is recent. However, there are no automated unit tests (only a manual integration app), the lint script is a placeholder, CI uses older action versions, and the Unity version-specific bridge code will need maintenance as Unity evolves.
react-syntax-highlighter is a React component library for syntax highlighting that supports two major backends: highlight.js (via lowlight) and Prism (via refractor). It renders syntax-highlighted code into React virtual DOM with inline styles, avoiding `dangerouslySetInnerHTML`. The architecture is built around a core highlighter factory in `src/highlight.js` that takes an AST generator and produces `<pre>`/`<code>` structures with optional line numbers, line wrapping, custom renderers, and style injection. The library provides both statically bundled builds (all languages included) and light/async variants that support dynamic language registration and code splitting via Webpack's `import()` comments. This enables consumers to reduce bundle size by loading only the languages they need, both synchronously and asynchronously. Beyond the core highlighter, the repository includes a massive collection of auto-generated theme and language files—over 90 highlight.js themes and 40+ Prism themes, plus hundreds of language definitions—all exported as JavaScript objects. Build scripts in `scripts/` generate these assets from upstream packages, ensuring theme CSS is parsed and camel-cased into inline style objects. The library also exports a `createElement` utility and a `checkForListedLanguage` helper, and supports custom renderer plugins (e.g., virtualized rendering for large blocks of code). Although the codebase is functionally complete and well-tested, it suffers from moderate technical drift due to outdated dependencies, lack of TypeScript definitions, and a fragile generated file structure that is tightly coupled to specific versions of highlight.js and prismjs.
This is a React component library that wraps the Baidu Maps JavaScript API (v2.0). It provides declarative React components for embedding Baidu maps, markers, info windows, controls, shapes, and advanced visualization layers (via mapv and mapvgl). The architecture is straightforward: each component manages a Baidu API object's lifecycle (create in componentDidMount, update in componentDidUpdate, destroy in componentWillUnmount), and render returns null. The Map component passes the map instance to children via React.cloneElement. The library is built with Babel 6, Webpack 3, and targets React 15. It is a wrapper library, not a standalone application. The codebase is functional but outdated, with high technical drift due to very old dependencies (React 15, Babel 6, Webpack 3). The library is no longer actively developed; the README recommends using the newer React-BMapGL for 3D support. It is suitable for simple Baidu map integrations in legacy React projects, but not recommended for new development.