13 个仓库
Techniques for passing DOM references through component hierarchies to allow parent access to child elements.
Explore 13 awesome GitHub repositories matching user interface & experience · Ref Forwarding. Refine with filters or upvote what's useful.
React 是一个用于构建用户界面的 JavaScript 库,采用组件化架构和单向数据流。
Passes references through component hierarchies to allow direct access to underlying child elements.
Primitives is a library of unstyled, accessible building blocks designed for creating complex interface elements in React. It functions as a headless component framework, providing the underlying logic, state management, and accessibility compliance while leaving all visual styling and design decisions entirely to the developer. The library distinguishes itself through a composition-based architecture that allows developers to build interactive interfaces by nesting small, single-purpose components. This system automatically handles complex requirements such as WAI-ARIA attribute injection, f
Uses reference forwarding to allow parent components to access and manipulate the underlying DOM nodes of children.
Inferno is a virtual DOM UI library and high-performance DOM renderer used for building component-based user interfaces. It functions as a server-side rendering engine and a client-side framework that synchronizes application state with the visual interface through a declarative structure. The project distinguishes itself as a React-compatible UI framework, providing a compatibility layer that allows components designed for other reactive environments to run without modification. Its capability surface covers virtual DOM management, including node diffing and reconciliation, and a full serve
Implements ref forwarding to allow parent components direct access to elements within child components.
Cropper.js is a JavaScript image cropping library and client-side image editor. It provides a front-end interface for manipulating image geometry and extracting specific regions using the HTML5 Canvas API. The library enables interactive image cropping where users can manually select areas and define clipping regions. It supports geometry transformations including rotation, scaling, and zooming to align subjects, and allows for the enforcement of dynamic aspect ratios. The tool provides capabilities for exporting crop data as coordinates or canvas representations and offers access to interna
Exposes direct DOM references to internal canvas and image elements for custom styling and manipulation.
Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples behavioral logic and state management from the visual layer, allowing developers to implement complex UI patterns while maintaining total control over the final styling. The library implements WAI-ARIA design patterns to ensure all primitives support standard keyboard navigation and screen reader accessibility. It provides a suite of low-level building blocks that handle the internal mechanics of interface elements without bundling any CSS. The framework covers a broad range
Combines internal element refs with external user refs to allow shared access to the underlying DOM node.
react-chartjs-2 is a data visualization library that provides a set of React components acting as a wrapper for Chart.js. It allows for the rendering of interactive charts and graphs within a React application using a declarative approach. The library manages HTML5 canvas charting components by tying the lifecycle of Chart.js instances to the mounting and unmounting of the React component tree. It translates component props into the configuration objects required by the underlying engine to map datasets to visual elements. The project covers a range of frontend integration capabilities, incl
Uses React refs to grant the charting engine direct access to the HTML canvas for drawing.
Vanta is a browser-based engine and library for rendering real-time, interactive 3D animations and stylized visual effects. It initializes and manages WebGL graphics within the HTML5 Canvas element to create animated digital art and dynamic backgrounds for web pages. The engine focuses on interactivity, mapping mouse and touch inputs to real-time visual changes. It provides configuration tools to adjust visual parameters, such as colors and animation properties, to align with specific branding and aesthetic requirements. The system handles the full animation lifecycle, including GPU renderin
Binds the graphics rendering context directly to HTML canvas elements for seamless page embedding.
MapCN is a React component library that wraps MapLibre GL into declarative, composable building blocks for interactive maps. It provides a set of small, reusable components for rendering maps, placing markers, drawing routes, and clustering points, all managed through React hooks, context, and refs for state and lifecycle control. The library distinguishes itself by offering a complete set of map features as individual React components that automatically adapt to light and dark themes. It includes components for interactive map rendering with zero configuration, marker placement with popups a
Accesses the underlying map instance through a ref to call methods and listen to events.
Vetur is a Visual Studio Code extension that provides comprehensive language support for Vue single-file components. It parses .vue files into separate template, script, and style regions, then delegates each region to its own language service for independent processing. This architecture enables IntelliSense, type-checking, formatting, and linting across all embedded languages within a Vue file. The extension distinguishes itself through deep integration with Vue's component model. It infers TypeScript types for template expressions by analyzing component props, data, and computed properti
Visually underlines .value property accesses in Composition API code to distinguish ref values from plain variables.
vue-chartjs is a component library that wraps Chart.js chart types as reusable Vue components, integrating the charting library into Vue's component model. It provides reactive props binding so that charts automatically redraw when data or options change, and exposes the underlying Chart.js instance via template refs for direct programmatic access. The library also forwards Chart.js interaction events like clicks and hovers to Vue component event handlers, and applies ARIA labels to chart elements for screen reader support. The library distinguishes itself by offering typed Vue components for
Exposes the underlying Chart.js instance via a template ref for direct programmatic access.
这是一个 GIS 组件库和 Leaflet 地图库的 React 封装器。它充当命令式 Leaflet API 与声明式 React 状态管理之间的桥梁,允许创建交互式地理地图和空间数据可视化。 该库使用基于组件的架构来渲染带有标记和图层的地图。它将 React 虚拟 DOM 与地图的内部图层注册表同步,以保持一致的地理状态,并将组件生命周期映射到地图图层的添加和移除。 该工具提供了动态地图状态管理和地图事件集成的功能。它允许通过 Provider 分发地图实例,并通过引用(ref)暴露底层的 Leaflet 实例,以便直接访问底层地图 API 方法。
Exposes the underlying map instance through a React ref for direct imperative method calls.
This project is a component library that bridges the Bulma CSS framework with React. It provides a set of declarative building blocks that map standard CSS framework patterns to reusable interface elements, enabling the construction of responsive and accessible web layouts. The library utilizes a compositional architecture where modular components encapsulate specific styling rules and structural behaviors. It supports polymorphic rendering, allowing components to dynamically change their underlying HTML tags at runtime to maintain semantic structure. Developers can also utilize property mapp
Passes DOM references through component hierarchies to allow parent access to child elements.
Field-form is a library for managing complex form state, validation, and field synchronization within React component trees. It functions as a state management solution that uses a shared provider to distribute form data and validation messages across nested components. The library distinguishes itself through a dynamic field registry that supports the addition, removal, and reordering of form controls. It employs a field-level subscription model to ensure that individual components only re-render when their specific state slices change, and it provides an imperative interface for triggering
Provides a ref-based interface for imperative control over form validation, resets, and submissions.