Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jaredpalmer/awesome-react-render-props

Awesome list of React components with render props
https://github.com/jaredpalmer/awesome-react-render-props

List: awesome-react-render-props

awesome awesome-list hoc react render-prop

Last synced: about 1 month ago
JSON representation

Awesome list of React components with render props

Awesome Lists containing this project

README 

        
# Awesome React Render Props



Awesome list of React components with render props and resources.



> PR's Welcome!



## Videos



- [The State of Animation in React](https://www.youtube.com/watch?v=1tavDv5hXpo) by [Cheng Lou](https://twitter.com/_chenglou)

- [Use Render Props with React](https://egghead.io/lessons/react-use-render-props-with-react) 💲 by [Kent C. Dodds](https://twitter.com/kentcdodds)

- [Refactor a HoC to a Render Prop Component](https://egghead.io/lessons/react-refactor-a-higher-order-component-to-a-render-prop-component) by [Andrew Del Prete](https://twitter.com/andrewdelprete)

- [Unit test a React Render Prop component](https://egghead.io/lessons/react-unit-test-a-react-render-prop-component) 💲 by [Andrew Del Prete](https://twitter.com/andrewdelprete)

- [Integration test a React component that consumes a Render Prop](https://egghead.io/lessons/react-integration-test-a-react-component-that-consumes-a-render-prop) 💲 by [Andrew Del Prete](https://twitter.com/andrewdelprete)

- [Compose render prop components with React Adopt](https://egghead.io/lessons/react-compose-render-prop-components-with-react-adopt) by [Andrew Del Prete](https://twitter.com/andrewdelprete)

- [Never Write Another HoC](https://www.youtube.com/watch?v=BcVAq3YFiuc) by [Michael Jackson](https://twitter.com/mjackson)



## Blog Posts / Articles



- [Use a Render Prop!](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) by [Michael Jackson](https://twitter.com/mjackson)

- [Query Components with Apollo](https://dev-blog.apollodata.com/query-components-with-apollo-ec603188c157) by [Kureev Alexey](https://twitter.com/kureevalexey)

- [Testing ⚛️ components using render props](https://blog.kentcdodds.com/5623ab1814c) by [Kent C. Dodds](https://twitter.com/kentcdodds)

- [How to give rendering control to users with prop getters](https://blog.kentcdodds.com/549eaef76acf) by [Kent C. Dodds](https://twitter.com/kentcdodds)

- [React’s ⚛️ new Context API](https://medium.com/dailyjs/reacts--new-context-api-70c9fe01596b) (uses a render prop, includes handy examples) by [Kent C. Dodds](https://twitter.com/kentcdodds)



## Components



### Animation



- [react-morph](https://github.com/brunnolou/react-morph): Morphing Ui transitions made simple

- [react-move](https://github.com/react-tools/react-move): Beautiful, data-driven animations for React

- [react-motion](https://github.com/chenglou/react-motion): A spring that solves your animation problems.

- [react-prop-transition](https://github.com/imranolas/react-prop-transition): Transition _almost_ any value over time.

- [react-spring](https://github.com/drcmda/react-spring): 🙌 Helping react-motion and animated to become best friends



### Composition



- [react-adopt](https://github.com/pedronauck/react-adopt): 😎 Compose render props components like a pro.

- [react-composer](https://github.com/jmeas/react-composer): Compose render prop components

- [render-props-compose](https://github.com/gnapse/render-props-compose): Compose several nested render prop components into one

- [@danwang/retainer](https://github.com/danwang/retainer): Compose render prop components by lifting computation into containers



### Interaction



- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd): Beautiful, accessible drag and drop for lists with React

- [react-dragtastic](https://github.com/chrisjpatty/react-dragtastic): Declarative drag-and-drop for React

- [stickyard](https://github.com/nihgwu/stickyard): Make your component sticky the easy way



### Routing



- [@curi/react](https://curi.js.org/packages/@curi/react): Centralized routing with React

- [react-router](https://github.com/reacttraining/react-router): Declarative routing for React



### Forms



- [formik](https://github.com/jaredpalmer/formik): Forms in React, without tears 😭

- [informative](https://github.com/bradwestfall/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](https://github.com/gianmarcotoso/react-attire): Minimal state manager that simplifies React form handling

- [react-final-form](https://github.com/final-form/react-final-form): 🏁 High performance subscription-based form state management for React

- [react-form](https://github.com/react-tools/react-form): Simple, powerful, highly composable forms in React

- [react-form-validation](https://github.com/semmiverian/react-form-validation): Forms Validation with built in rules for validating your input.

- [react-uncontrolled-form](https://github.com/ericvaladas/react-uncontrolled-form): Forms with validation using uncontrolled fields in React



### Inputs



- [dayzed](https://github.com/deseretdigital/dayzed): Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components

- [downshift](https://github.com/paypal/downshift): 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components

- [react-compound-slider](https://github.com/sghall/react-compound-slider): React Compound Slider is a tiny (5kb) slider component with no opinion about markup or styles

- [react-selected](https://github.com/jxom/react-selected): React component to build flexible and accessible radio buttons/elements.

- [react-toggled](https://github.com/kentcdodds/react-toggled): Component to build simple, flexible, and accessible toggle components

- [@navjobs/upload](https://github.com/navjobs/upload): Higher order React components for file uploading (with progress) react file upload



### Data



- [constate](https://github.com/diegohaz/constate): React context + state = constate

- [holen](https://github.com/tkh44/holen): Declarative fetch for React

- [react-apollo](https://github.com/apollographql/react-apollo): ♻️ React integration for Apollo Client

- [react-aqueduct](https://github.com/kserjey/react-aqueduct): Declarative HTTP requests components

- [react-data-sort](https://github.com/corjen/react-data-sort): React component for sorting, paginating and searching data

- [react-firestore](https://github.com/green-arrow/react-firestore): Render prop components to fetch Firestore collections and documents

- [react-gizmo](https://github.com/KadoBOT/react-gizmo): UI Finite State Machine for React

- [react-localforage](https://github.com/tkh44/react-localforage): Declarative localForage in React

- [react-powerplug](https://github.com/renatorib/react-powerplug): Renderless Pluggable State Containers

- [react-redux-local](https://github.com/imflavio/react-redux-local): Simple local reducer with middleware/sagas/redux-dev-tools support.

- [react-request](https://github.com/jmeas/react-request): Declarative HTTP requests for React with request deduplication and response caching

- [react-senna](https://github.com/collardeau/react-senna): A store component to quickly initiate state and update handlers

- [react-value](https://github.com/JedWatson/react-value): An easy easy way to wrap controlled components that provide `value` and `onChange` props with state.

- [react-values](https://github.com/ianstormtaylor/react-values): ✨ A set of tiny, composable React components for handling state with render props.

- [react-whisper](https://github.com/arturkulig/react-whisper): ☝️😮 Store, Reducer and Actor components for app-wide state management

- [redebounce](https://github.com/axross/redebounce): debouncing the given value

- [redux-box](https://github.com/anish000kumar/redux-box): Modular and easy-to-grasp redux based state management, with least boilerplate

- [redux-render](https://github.com/jsonnull/redux-render): Ergonomic Redux bindings for React using render props

- [repromised](https://github.com/axross/repromised): Declarative promise resolver

- [statty](https://github.com/vesparny/statty): A tiny and unobtrusive state management library for React and Preact apps

- [unstated](https://github.com/thejameskyle/unstated): Share state between components with the same stateful component API

- [urql](https://github.com/FormidableLabs/urql): Universal React Query Library



### Media



- [nuka-carousel](https://github.com/FormidableLabs/nuka-carousel): React Carousel Component

- [react-power-picture](https://github.com/tvthatsme/react-power-picture): Progressively load an image srcset for maximum responsiveness and performance

- [react-progressive-image](https://github.com/FormidableLabs/react-progressive-image): React component for progressive image loading

- [react-with-async-fonts](https://github.com/sergeybekrin/react-with-async-fonts): Module for dealing with custom web fonts



### Scheduling



- [react-pro-metronome](https://github.com/rigobauer/react-pro-metronome): React component for creating your own metronome

- [react-sentinel](https://github.com/YurkaninRyan/react-sentinel): Abstracts away requestAnimationFrame, allowing you to poll anything for props

- [react-t-minus](https://github.com/jxom/react-t-minus): A React component to handle simple countdowns.



### Misc



- [react-albus](https://github.com/americanexpress/react-albus): React component library for building declarative multi-step flows (wizards).

- [react-device-battery](https://github.com/zanonnicola/react-device-battery): 🔋 Notifies your React App of the device battery status

- [react-fns](https://github.com/jaredpalmer/react-fns): Browser API's turned into declarative React components and HoC's

- [react-geolocation](https://github.com/tkh44/react-geolocation): Declarative geolocation in React

- [react-google-maps-loader](https://github.com/xuopled/react-google-maps-loader): Simple loader to use google maps services

- [react-google-calendar-events-list](https://github.com/VinSpee/react-gcal-events-list): React component which retrieves events from a google calendar.

- [@foes/react-i18n-routing](https://github.com/FriendsOfECMAScript/ReactI18nRouting): 🌐 Missing i18n components and functions to bridge react-router and react-intl

- [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer): Monitor when an element enters or leaves the browser viewport.

- [react-loads](https://github.com/jxom/react-loads): A simple React component to handle loading state

- [react-loops](https://github.com/leebyron/react-loops): Easily convert collections of any kind into lists of React elements with crystal clear syntax.

- [react-media](https://github.com/reacttraining/react-media): CSS media queries for React

- [react-pledge](https://github.com/petergombos/react-pledge): Declarative way to track promise lifecycle states using "render props"

- [react-render-callback](https://github.com/sastan/react-render-callback): Implement "render props" in your components to render anything

- [react-render-fam](https://github.com/danieldelcore/react-render-fam): Lit components for conditional rendering in React

- [react-sizeme](https://github.com/ctrlplusb/react-sizeme): Make your React Components aware of their width and height!

- [@tedconf/react-show-more](https://github.com/tedconf/react-show-more): A Unopinionated component to handle showing more items

- [react-treefold](https://github.com/gnapse/react-treefold): A renderless tree component for your hierarchical React views

- [react-useragent](https://github.com/jonstuebe/react-useragent): Retrieve user agent data through render props

- [react-virtual-container](https://github.com/ctrlplusb/react-virtual-container): Optimise your React apps by only rendering components when in proximity to the viewport.



### React Native



- [react-native-responsive-image-view](https://github.com/wKovacs64/react-native-responsive-image-view): React Native component for scaling an Image within the parent View

- [react-native-sideswipe](https://github.com/kkemple/react-native-sideswipe): React Native cross-platform carousel component based on FlatList