petergombos / awesome-react-render-props

Awesome list of React components with render props

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

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-motion: A spring that solves your animation problems.
• react-move: Beautiful, data-driven animations for React
• react-prop-transition: Transition almost any value over time.
• react-morph: Morphing Ui transitions made simple
• react-spring: 🙌 Helping react-motion and animated to become best friends

Interaction

• react-dragtastic: Declarative drag-and-drop for React
• react-beautiful-dnd: Beautiful, accessible drag and drop for lists with React

Routing

• react-router: Declarative routing for React
• @curi/react: Centralized routing with React

Forms

• Formik: Forms in React, without tears 😭
• React Final Form: 🏁 High performance subscription-based form state management for React
• React Attire: Minimal state manager that simplifies React form handling
• 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 Form: Simple, powerful, highly composable forms in React
• react-uncontrolled-form: Forms with validation using uncontrolled fields in React

Inputs

• Downshift: 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components
• 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
• Dayzed: Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components
• react-compound-slider: React Compound Slider is a tiny (5kb) slider component with no opinion about markup or styles

Data

• react-apollo: ♻️ React integration for Apollo Client
• urql: Universal React Query Library
• holen: Declarative fetch for React
• react-request: Declarative HTTP requests for React with request deduplication and response caching
• react-firestore: Render prop components to fetch Firestore collections and documents
• redux-box: Modular and easy-to-grasp redux based state management, with least boilerplate
• statty: A tiny and unobtrusive state management library for React and Preact apps
• react-localforage: Declarative localForage in React
• react-senna: A store component to quickly initiate state and update handlers
• constate: React context + state = constate
• react-whisper ☝️😮: Store, Reducer and Actor components for app-wide state management

Misc

• nuka-carousel: React Carousel Component
• react-fns: Browser API's turned into declarative React components and HoC's
• react-media: CSS media queries for React
• react-value: An easy easy way to wrap controlled components that provide value and onChange props with state.
• react-redux-local: Simple local reducer with middleware/sagas/redux-dev-tools support.
• react-powerplug: Renderless Pluggable State Containers
• react-google-maps-loader: Simple loader to use google maps services
• react-progressive-image: React component for progressive image loading
• react-device-battery: 🔋 Notifies your React App of the device battery status
• react-loads: A simple React component to handle loading state
• react-data-sort: React component for sorting, paginating and searching data
• redux-render: Ergonomic Redux bindings for React using render props
• unstated: Share state between components with the same stateful component API
• render-props-compose: Compose several nested render prop components into one
• react-useragent: Retrieve user agent data through render props
• react-gizmo: UI Finite State Machine for React
• react-geolocation: Declarative geolocation in React
• react-composer: Compose render prop components
• react-sentinel: Abstracts away requestAnimationFrame, allowing you to poll anything for props
• react-albus: React component library for building declarative multi-step flows (wizards).
• react-pro-metronome: React component for creating your own metronome
• react-with-async-fonts: Module for dealing with custom web fonts
• @tedconf/react-show-more: A Unopinionated component to handle showing more items
• react-treefold: A renderless tree component for your hierarchical React views
• @danwang/retainer: Compose render prop components by lifting computation into containers
• react-google-calendar-events-list: React component which retrieves events from a google calendar.
• react-adopt: 😎 Compose render props components like a pro.
• react-pledge: Declarative way to track promise lifecycle states using "render props" 🕶

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