jaredpalmer / Awesome React Render Props
Awesome list of React components with render props
Stars: ✭ 1,304
Projects that are alternatives of or similar to Awesome React Render Props
addhoc
Handy little helper to create proper React HOC functions complete with hoisted statics and forwarded refs
Stars: ✭ 40 (-96.93%)
Mutual labels: hoc
React Styling Hoc
Механизм темизации для React-компонентов, написанных с использованием CSS модулей.
Stars: ✭ 25 (-98.08%)
Mutual labels: hoc
Shouldcomponentupdate Children
React "Shallow Equal" HOC implementation to optimize shouldComponentUpdate with children / React elements 🐇➰
Stars: ✭ 272 (-79.14%)
Mutual labels: hoc
Recompact
⚛ A set of React higher-order components utilities. Drop-in replacement for recompose.
Stars: ✭ 419 (-67.87%)
Mutual labels: hoc
hoc-element-table
📦 A Vue 3.x Table Component built on Webpack 5
Stars: ✭ 26 (-98.01%)
Mutual labels: hoc
React Router Breadcrumbs Hoc
tiny, flexible, HOC for rendering route breadcrumbs with react-router v4 & 5
Stars: ✭ 276 (-78.83%)
Mutual labels: hoc
React Lazy Load Image Component
React Component to lazy load images and components using a HOC to track window scroll position.
Stars: ✭ 755 (-42.1%)
Mutual labels: hoc
next-utils
🥩 🍳 A set of Next.js HoC utilities to make your life easier
Stars: ✭ 30 (-97.7%)
Mutual labels: hoc
React Click Outside
Higher Order Component that provides click outside functionality
Stars: ✭ 266 (-79.6%)
Mutual labels: hoc
Kanban React
The Kanban Application with multiple backend languages.
Stars: ✭ 15 (-98.85%)
Mutual labels: hoc
react-portal-hoc
A stupid HOC to make a stupid portal so you can make stupid modals
Stars: ✭ 14 (-98.93%)
Mutual labels: hoc
React Fns
Browser API's turned into declarative React components and HoC's
Stars: ✭ 3,734 (+186.35%)
Mutual labels: hoc
Incompose
A inferno utility belt for function components and higher-order components
Stars: ✭ 76 (-94.17%)
Mutual labels: hoc
Withobservables
HOC (Higher-Order Component) for connecting RxJS Observables to React Components
Stars: ✭ 41 (-96.86%)
Mutual labels: hoc
Awesome React Render Props
Awesome list of React components with render props and resources.
PR's Welcome!
Videos
- The State of Animation in React by Cheng Lou
- Use Render Props with React 💲 by Kent C. Dodds
- Refactor a HoC to a Render Prop Component by Andrew Del Prete
- Unit test a React Render Prop component 💲 by Andrew Del Prete
- Integration test a React component that consumes a Render Prop 💲 by Andrew Del Prete
- Compose render prop components with React Adopt by Andrew Del Prete
- Never Write Another HoC by Michael Jackson
Blog Posts / Articles
- Use a Render Prop! by Michael Jackson
- Query Components with Apollo by Kureev Alexey
- Testing ⚛️ components using render props by Kent C. Dodds
- How to give rendering control to users with prop getters by Kent C. Dodds
- React’s ⚛️ new Context API (uses a render prop, includes handy examples) by Kent C. Dodds
Components
Animation
- react-morph: Morphing Ui transitions made simple
- react-move: Beautiful, data-driven animations for React
- react-motion: A spring that solves your animation problems.
- react-prop-transition: Transition almost any value over time.
- react-spring: 🙌 Helping react-motion and animated to become best friends
Composition
- react-adopt: 😎 Compose render props components like a pro.
- react-composer: Compose render prop components
- render-props-compose: Compose several nested render prop components into one
- @danwang/retainer: Compose render prop components by lifting computation into containers
Interaction
- react-beautiful-dnd: Beautiful, accessible drag and drop for lists with React
- react-dragtastic: Declarative drag-and-drop for React
- stickyard: Make your component sticky the easy way
Routing
- @curi/react: Centralized routing with React
- react-router: Declarative routing for React
Forms
- formik: Forms in React, without tears 😭
- informative: React Forms with ease. Use render-props to broadcast state changes for the Form and Field. Also first-class support for re-usable FieldWraps
- react-attire: Minimal state manager that simplifies React form handling
- react-final-form: 🏁 High performance subscription-based form state management for React
- react-form: Simple, powerful, highly composable forms in React
- react-form-validation: Forms Validation with built in rules for validating your input.
- react-uncontrolled-form: Forms with validation using uncontrolled fields in React
Inputs
- dayzed: Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components
- downshift: 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components
- react-compound-slider: React Compound Slider is a tiny (5kb) slider component with no opinion about markup or styles
- react-selected: React component to build flexible and accessible radio buttons/elements.
- react-toggled: Component to build simple, flexible, and accessible toggle components
- @navjobs/upload: Higher order React components for file uploading (with progress) react file upload
Data
- constate: React context + state = constate
- holen: Declarative fetch for React
- react-apollo: ♻️ React integration for Apollo Client
- react-aqueduct: Declarative HTTP requests components
- react-data-sort: React component for sorting, paginating and searching data
- react-firestore: Render prop components to fetch Firestore collections and documents
- react-gizmo: UI Finite State Machine for React
- react-localforage: Declarative localForage in React
- react-powerplug: Renderless Pluggable State Containers
- react-redux-local: Simple local reducer with middleware/sagas/redux-dev-tools support.
- react-request: Declarative HTTP requests for React with request deduplication and response caching
- react-senna: A store component to quickly initiate state and update handlers
-
react-value: An easy easy way to wrap controlled components that provide
value
andonChange
props with state. - react-values: ✨ A set of tiny, composable React components for handling state with render props.
- react-whisper: ☝️😮 Store, Reducer and Actor components for app-wide state management
- redebounce: debouncing the given value
- redux-box: Modular and easy-to-grasp redux based state management, with least boilerplate
- redux-render: Ergonomic Redux bindings for React using render props
- repromised: Declarative promise resolver
- statty: A tiny and unobtrusive state management library for React and Preact apps
- unstated: Share state between components with the same stateful component API
- urql: Universal React Query Library
Media
- nuka-carousel: React Carousel Component
- react-power-picture: Progressively load an image srcset for maximum responsiveness and performance
- react-progressive-image: React component for progressive image loading
- react-with-async-fonts: Module for dealing with custom web fonts
Scheduling
- react-pro-metronome: React component for creating your own metronome
- react-sentinel: Abstracts away requestAnimationFrame, allowing you to poll anything for props
- react-t-minus: A React component to handle simple countdowns.
Misc
- react-albus: React component library for building declarative multi-step flows (wizards).
- react-device-battery: 🔋 Notifies your React App of the device battery status
- react-fns: Browser API's turned into declarative React components and HoC's
- react-geolocation: Declarative geolocation in React
- react-google-maps-loader: Simple loader to use google maps services
- react-google-calendar-events-list: React component which retrieves events from a google calendar.
- @foes/react-i18n-routing: 🌐 Missing i18n components and functions to bridge react-router and react-intl
- react-intersection-observer: Monitor when an element enters or leaves the browser viewport.
- react-loads: A simple React component to handle loading state
- react-loops: Easily convert collections of any kind into lists of React elements with crystal clear syntax.
- react-media: CSS media queries for React
- react-pledge: Declarative way to track promise lifecycle states using "render props"
- react-render-callback: Implement "render props" in your components to render anything
- react-render-fam: Lit components for conditional rendering in React
- react-sizeme: Make your React Components aware of their width and height!
- @tedconf/react-show-more: A Unopinionated component to handle showing more items
- react-treefold: A renderless tree component for your hierarchical React views
- react-useragent: Retrieve user agent data through render props
- react-virtual-container: Optimise your React apps by only rendering components when in proximity to the viewport.
React Native
- react-native-responsive-image-view: React Native component for scaling an Image within the parent View
- react-native-sideswipe: React Native cross-platform carousel component based on FlatList
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].