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