awesome-repositories.com
博客
MCP
awesome-repositories.com

通过 AI 驱动的搜索,发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目MCP 服务器关于排名机制媒体报道
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

13 个仓库

Awesome GitHub RepositoriesRef Forwarding

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.

Awesome Ref Forwarding GitHub Repositories

用 AI 发现最棒的仓库。我们将通过 AI 为您搜索最匹配的仓库。
  • facebook/reactfacebook 的头像

    facebook/react

    245,669在 GitHub 上查看↗

    React 是一个用于构建用户界面的 JavaScript 库,采用组件化架构和单向数据流。

    Passes references through component hierarchies to allow direct access to underlying child elements.

    JavaScriptjavascriptuifrontend
    在 GitHub 上查看↗245,669
  • radix-ui/primitivesradix-ui 的头像

    radix-ui/primitives

    18,642在 GitHub 上查看↗

    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.

    TypeScriptaccessibilitycolorscomponent-library
    在 GitHub 上查看↗18,642
  • infernojs/infernoinfernojs 的头像

    infernojs/inferno

    16,420在 GitHub 上查看↗

    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.

    JavaScript
    在 GitHub 上查看↗16,420
  • fengyuanchen/cropperjsfengyuanchen 的头像

    fengyuanchen/cropperjs

    13,834在 GitHub 上查看↗

    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.

    TypeScriptcroppercropperjsimage-cropper
    在 GitHub 上查看↗13,834
  • mui/base-uimui 的头像

    mui/base-ui

    8,711在 GitHub 上查看↗

    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.

    TypeScriptaccessibilitydesign-systemreact
    在 GitHub 上查看↗8,711
  • jerairrest/react-chartjs-2jerairrest 的头像

    jerairrest/react-chartjs-2

    6,933在 GitHub 上查看↗

    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.

    TypeScript
    在 GitHub 上查看↗6,933
  • tengbao/vantatengbao 的头像

    tengbao/vanta

    6,581在 GitHub 上查看↗

    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.

    JavaScript3danimationanimations
    在 GitHub 上查看↗6,581
  • anmolsaini16/mapcnAnmolSaini16 的头像

    AnmolSaini16/mapcn

    5,965在 GitHub 上查看↗

    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.

    TypeScript
    在 GitHub 上查看↗5,965
  • vuejs/veturvuejs 的头像

    vuejs/vetur

    5,751在 GitHub 上查看↗

    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.

    TypeScripthacktoberfestvisual-studio-codevscode
    在 GitHub 上查看↗5,751
  • apertureless/vue-chartjsapertureless 的头像

    apertureless/vue-chartjs

    5,717在 GitHub 上查看↗

    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.

    TypeScript
    在 GitHub 上查看↗5,717
  • paullecam/react-leafletPaulLeCam 的头像

    PaulLeCam/react-leaflet

    5,592在 GitHub 上查看↗

    这是一个 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.

    TypeScriptjavascriptleafletleaflet-maps
    在 GitHub 上查看↗5,592
  • couds/react-bulma-componentscouds 的头像

    couds/react-bulma-components

    1,201在 GitHub 上查看↗

    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.

    JavaScriptbulmabulma-frameworkcss
    在 GitHub 上查看↗1,201
  • react-component/field-formreact-component 的头像

    react-component/field-form

    1,023在 GitHub 上查看↗

    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.

    TypeScript
    在 GitHub 上查看↗1,023
  1. Home
  2. User Interface & Experience
  3. Component Architectures
  4. Component Communication Patterns
  5. Ref Forwarding

探索子标签

  • Canvas Element AccessTechniques for obtaining direct DOM references to canvas elements for imperative rendering. **Distinct from Ref Forwarding:** Distinct from Ref Forwarding: focuses on the specific use case of exposing a canvas for a third-party drawing library.
  • Imperative Map Ref Access1 个子标签Exposes the map instance through a React ref for imperative method calls and event listener attachment. **Distinct from Ref Forwarding:** Distinct from Ref Forwarding: specifically provides a ref to the map instance for imperative control, not just passing refs through the component tree.
  • Reference MergingCombines multiple DOM references into a single element to allow shared access between internal and external logic. **Distinct from Ref Forwarding:** Specifically handles the merging of multiple refs, whereas ref forwarding just passes a single ref up the tree.