Awesome React Render Props
Awesome list of React components with render props and resources.
- 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
⚛️components using render props by Kent C. Dodds
- How to give rendering control to users with prop getters by Kent C. Dodds
⚛️new Context API (uses a render prop, includes handy examples) by Kent C. Dodds
- 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.
🙌Helping react-motion and animated to become best friends
😎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
- 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
- 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
🏁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
- dayzed: Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components
🏎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
- constate: React context + state = constate
- holen: Declarative fetch for React
♻️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
onChangeprops with state.
✨A set of tiny, composable React components for handling state with render props.
☝️ 😮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
- 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
- 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.
- react-albus: React component library for building declarative multi-step flows (wizards).
🔋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.
🌐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.