Skip to content
47

Awesome React Render Props

Awesome list of React components with render props

1.4k stars108 forks89 entriesLast push Apr 4, 2019 (7 years ago)License none

This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.

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

In 2 lists

react-move

Beautiful, data-driven animations for React

react-motion

A spring that solves your animation problems.

In 3 lists

react-prop-transition

Transition almost any value over time.

react-spring

🙌 Helping react-motion and animated to become best friends

Components >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

Components >Interaction

react-beautiful-dnd

Beautiful, accessible drag and drop for lists with React

In 4 lists

react-dragtastic

Declarative drag-and-drop for React

stickyard

Make your component sticky the easy way

Components >Routing

@curi/react

Centralized routing with React

react-router

Declarative routing for React

In 2 lists

Components >Forms

formik

Forms in React, without tears 😭

In 4 listsDetails

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

In 3 lists

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

Components >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

Components >Data

constate

React context + state = constate

In 3 lists

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 and onChange 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

In 2 lists

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

Components >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

Components >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.

Components >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.

In 4 lists

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

In 2 lists

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!

In 2 lists

@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.

Components >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

See category
93

Awesome Vue

vuejs/awesome-vue

🎉 A curated list of awesome things related to Vue.js

Fresh★ 74k1067 entriesPushed 5 days ago
93

Awesome DESIGN.md

VoltAgent/awesome-design-md

A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.

Fresh★ 119k74 entriesPushed 9 days ago
91

Awesome Angular

PatrickJS/awesome-angular

:page_facing_up: A curated list of awesome Angular resources

Fresh★ 10k1944 entriesPushed today
90

Awesome Blazor

AdrienTorris/awesome-blazor

Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Fresh★ 9.4k375 entriesPushed today
88

Must-Watch CSS

AllThingsSmitty/must-watch-css

CSS talks you have to see covering CSS Grid, flexbox, custom variables, performance, frameworks, tooling, and more! 📺

Fresh★ 4.9k70 entriesPushed 6 days ago
87

Awesome React Native

jondot/awesome-react-native

Awesome React Native components, news, tools, and learning material!

Fresh★ 36k194 entriesPushed 1 month ago