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

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

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

11 个仓库

Awesome GitHub RepositoriesRender Props

Component patterns that expose internal state via functions to allow consumers to define the rendering logic.

Distinct from Declarative Rendering Frameworks: Focuses on the specific pattern of using functions as props for rendering, rather than the broader framework for DOM synchronization.

Explore 11 awesome GitHub repositories matching user interface & experience · Render Props. Refine with filters or upvote what's useful.

Awesome Render Props GitHub Repositories

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

    tailwindlabs/headlessui

    28,619在 GitHub 上查看↗

    Headless UI is a headless component library and accessible UI component kit that provides logic-only interface elements. It functions as a state-driven UI framework designed to provide functionality without prescribing any specific visual styles. The library is specifically designed for integration with Tailwind CSS, enabling the implementation of custom design systems. It allows users to apply visual styles to components based on whether they are active, selected, or open. The project covers the development of accessible UI components that meet ARIA standards and include built-in keyboard n

    Implements a declarative render prop pattern to expose internal component state for custom UI rendering.

    TypeScripta11yaccessibilitycomponents
    在 GitHub 上查看↗28,619
  • acdlite/recomposeacdlite 的头像

    acdlite/recompose

    14,801在 GitHub 上查看↗

    Recompose is a suite of toolsets for implementing higher-order component composition, context extraction, render optimization, and external state integration. It provides a library of utilities to wrap components in reusable logic and behavioral layers, allowing developers to chain functional wrappers and reduce nesting within a component tree. The project focuses on the composition of functional wrappers to inject properties and behavior into components. It includes a set of helpers for extracting values from component context and passing them as direct properties, as well as tools for integ

    Transforms render props and context consumers into wrapper components for easier integration with other logic enhancers.

    JavaScript
    在 GitHub 上查看↗14,801
  • krasimir/react-in-patternskrasimir 的头像

    krasimir/react-in-patterns

    13,578在 GitHub 上查看↗

    This project is a comprehensive guide to architectural patterns and design techniques for building modular user interfaces with React. It focuses on structuring component hierarchies, implementing state management patterns, and decoupling services to ensure applications remain maintainable and scalable. The collection emphasizes strategies for dependency injection and the separation of business logic from presentation layers. It provides detailed approaches for utilizing containers, higher-order components, and module registries to isolate external services and third-party libraries from the

    Implements functions as props to allow children to manage logic while parents control the final output.

    JavaScriptdata-flowdependencyinjection
    在 GitHub 上查看↗13,578
  • 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

    Allows consumers to replace default DOM elements with custom components via render props while preserving internal logic.

    TypeScriptaccessibilitydesign-systemreact
    在 GitHub 上查看↗8,711
  • geekyants/vue-native-coreGeekyAnts 的头像

    GeekyAnts/vue-native-core

    8,281在 GitHub 上查看↗

    Vue Native is a framework that compiles Vue.js single-file components into React Native primitives, enabling developers to build native iOS and Android applications using Vue syntax. At its core, it provides a build-time compiler that transforms Vue components into React components, while hooking Vue's dependency-tracking reactivity system into React's component lifecycle to trigger re-renders when observed data changes. The framework wraps React Native's native module bridge so Vue components can access device APIs through Vue's reactivity system, and maps Vue's component syntax to React Nat

    Supports passing Vue components as props to React Native components that expect a render prop.

    JavaScriptandroidframeworkios
    在 GitHub 上查看↗8,281
  • moroshko/react-autosuggestmoroshko 的头像

    moroshko/react-autosuggest

    5,940在 GitHub 上查看↗

    React Autosuggest is a fully controlled React component that provides an autocomplete input with a dropdown of suggestions as the user types. It delegates all state management to the parent component through callbacks, making it compatible with state management patterns like Flux or Redux. The component implements WAI-ARIA accessibility patterns, including keyboard navigation with arrow keys, Enter, and Escape, along with live region integration for screen reader announcements. The component offers extensive customization through render-prop functions, allowing developers to replace the defau

    Exposes render props for input and suggestion rendering, giving full markup and style control.

    JavaScript
    在 GitHub 上查看↗5,940
  • xiaolin/react-image-galleryxiaolin 的头像

    xiaolin/react-image-gallery

    3,941在 GitHub 上查看↗

    这是一个用于 React 的响应式图片库和轮播组件。它提供了一个滑动界面,用于在单一导航序列中显示图片和混合媒体(如嵌入式视频和 iframe)。 该库支持带有手动播放和暂停控制的自动播放,并能适应不同屏幕尺寸的布局。它包括使用原生浏览器实现的全屏显示模式,并允许通过渲染属性 (render props) 自定义幻灯片内容。 导航通过触摸滑动手势、键盘箭头输入和直接缩略图选择来处理。该组件支持水平和垂直布局方向(包括从右到左的语言布局),并支持通过 CSS 自定义属性进行视觉主题修改。

    Uses the render prop pattern to allow custom HTML or video components within slides.

    TypeScript
    在 GitHub 上查看↗3,941
  • wojtekmaj/react-calendarwojtekmaj 的头像

    wojtekmaj/react-calendar

    3,782在 GitHub 上查看↗

    react-calendar is a customizable date grid and picker for React applications. It provides an interactive interface for selecting single or multiple dates and navigating between months and years. The component uses browser internationalization APIs to format months and days, enabling multilingual date formatting for different global regions. It allows for external customization through prop-driven render overrides to replace default date cell displays. The library handles the underlying date calculations and state-driven navigation required for scheduling interfaces and date-based grids.

    Implements render props to allow external control over the rendering logic of date cells.

    TypeScriptcalendardatedate-picker
    在 GitHub 上查看↗3,782
  • reactjs/react-autocompletereactjs 的头像

    reactjs/react-autocomplete

    2,159在 GitHub 上查看↗

    This library provides a React component for building accessible combobox and autocomplete inputs. It is designed to display dynamic search suggestions as users type, facilitating data selection from large sets while adhering to established accessibility standards for screen readers and keyboard navigation. The component distinguishes itself through a highly flexible architecture that allows developers to define custom visual layouts for both the input field and the suggestion menu. By utilizing render prop composition and custom rendering interfaces, it enables the injection of unique UI logi

    Accepts functional templates to allow developers to inject custom UI logic for menu items and input fields while maintaining internal behavior.

    JavaScript
    在 GitHub 上查看↗2,159
  • szhsin/react-menuszhsin 的头像

    szhsin/react-menu

    1,219在 GitHub 上查看↗

    React Menu is a library for building accessible, keyboard-navigable dropdown and context menus within web applications. It provides a set of tools for creating complex, hierarchical navigation structures that support unlimited submenu nesting and standard accessibility patterns for screen reader compatibility. The library distinguishes itself through a focus on dynamic layout and positioning, utilizing real-time collision detection to adjust menu placement relative to anchor elements and viewport boundaries. It employs a portal-based rendering strategy to prevent clipping and z-index conflict

    Uses render props to expose internal state, allowing developers to inject custom UI elements into the menu.

    JavaScriptaccessibilitycheckboxcontextmenu
    在 GitHub 上查看↗1,219
  • rrutsche/react-parallaxrrutsche 的头像

    rrutsche/react-parallax

    876在 GitHub 上查看↗

    React Parallax is a React animation component library that creates multi-speed scrolling background depth effects. It computes relative scroll positions within viewports to translate raw page offsets into normalized animation progress values, applying hardware-accelerated translation and scaling styles to DOM nodes for smooth visual movement. The library supports rendering background images and arbitrary visual elements that shift positions at different speeds relative to foreground content. It provides dynamic Gaussian blur filter transitions that interpolate based on current scroll velocity

    Exposes internal state via render props for flexible custom component rendering.

    TypeScript
    在 GitHub 上查看↗876
  1. Home
  2. User Interface & Experience
  3. DOM Manipulation Libraries
  4. Declarative Rendering Frameworks
  5. Render Props

探索子标签

  • Pattern ConversionsUtilities that transform specific rendering patterns into compatible wrapper components. **Distinct from Render Props:** Distinct from Render Props: focuses on the conversion of render props into HOC wrappers rather than the implementation of the render prop pattern itself.
  • Render Prop TransformationsUtilities that convert render prop patterns into wrapper components for easier composition. **Distinct from Render Props:** Focuses on the conversion/transformation of the pattern rather than the implementation of the render prop itself.