{"id":34933,"url":"https://github.com/eric-erki/awesome-react-render-props","name":"awesome-react-render-props","description":"Awesome list of React components with render props","projects_count":89,"last_synced_at":"2026-06-22T15:00:19.593Z","repository":{"id":99090995,"uuid":"237773095","full_name":"eric-erki/awesome-react-render-props","owner":"eric-erki","description":"Awesome list of React components with render props","archived":false,"fork":false,"pushed_at":"2020-02-02T13:11:42.000Z","size":89,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-06-15T03:33:53.099Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eric-erki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-02-02T13:11:17.000Z","updated_at":"2025-12-16T08:29:37.000Z","dependencies_parsed_at":"2023-07-06T19:33:34.478Z","dependency_job_id":null,"html_url":"https://github.com/eric-erki/awesome-react-render-props","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eric-erki/awesome-react-render-props","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eric-erki%2Fawesome-react-render-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eric-erki%2Fawesome-react-render-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eric-erki%2Fawesome-react-render-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eric-erki%2Fawesome-react-render-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eric-erki","download_url":"https://codeload.github.com/eric-erki/awesome-react-render-props/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eric-erki%2Fawesome-react-render-props/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34653715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-22T02:00:06.391Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-01-13T12:59:12.969Z","updated_at":"2026-06-22T15:00:19.595Z","primary_language":"JavaScript","list_of_lists":false,"displayable":true,"categories":["Components","Videos","Blog Posts / Articles"],"sub_categories":["Forms","Routing","Misc","Data","Interaction","Animation","Inputs","Composition","Media","Scheduling","React Native"],"readme":"# Awesome React Render Props\n\nAwesome list of React components with render props and resources.\n\n\u003e PR's Welcome!\n\n## Videos\n\n- [The State of Animation in React](https://www.youtube.com/watch?v=1tavDv5hXpo) by [Cheng Lou](https://twitter.com/_chenglou)\n- [Use Render Props with React](https://egghead.io/lessons/react-use-render-props-with-react) 💲 by [Kent C. Dodds](https://twitter.com/kentcdodds)\n- [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)\n- [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)\n- [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)\n- [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)\n- [Never Write Another HoC](https://www.youtube.com/watch?v=BcVAq3YFiuc) by [Michael Jackson](https://twitter.com/mjackson)\n\n## Blog Posts / Articles\n\n- [Use a Render Prop!](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) by [Michael Jackson](https://twitter.com/mjackson)\n- [Query Components with Apollo](https://dev-blog.apollodata.com/query-components-with-apollo-ec603188c157) by [Kureev Alexey](https://twitter.com/kureevalexey)\n- [Testing ⚛️ components using render props](https://blog.kentcdodds.com/5623ab1814c) by [Kent C. Dodds](https://twitter.com/kentcdodds)\n- [How to give rendering control to users with prop getters](https://blog.kentcdodds.com/549eaef76acf) by [Kent C. Dodds](https://twitter.com/kentcdodds)\n- [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)\n\n## Components\n\n### Animation\n\n- [react-morph](https://github.com/brunnolou/react-morph): Morphing Ui transitions made simple\n- [react-move](https://github.com/react-tools/react-move): Beautiful, data-driven animations for React\n- [react-motion](https://github.com/chenglou/react-motion): A spring that solves your animation problems.\n- [react-prop-transition](https://github.com/imranolas/react-prop-transition): Transition _almost_ any value over time.\n- [react-spring](https://github.com/drcmda/react-spring): 🙌 Helping react-motion and animated to become best friends\n\n### Composition\n\n- [react-adopt](https://github.com/pedronauck/react-adopt): 😎 Compose render props components like a pro.\n- [react-composer](https://github.com/jmeas/react-composer): Compose render prop components\n- [render-props-compose](https://github.com/gnapse/render-props-compose): Compose several nested render prop components into one\n- [@danwang/retainer](https://github.com/danwang/retainer): Compose render prop components by lifting computation into containers\n\n### Interaction\n\n- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd): Beautiful, accessible drag and drop for lists with React\n- [react-dragtastic](https://github.com/chrisjpatty/react-dragtastic): Declarative drag-and-drop for React\n- [stickyard](https://github.com/nihgwu/stickyard): Make your component sticky the easy way\n\n### Routing\n\n- [@curi/react](https://curi.js.org/packages/@curi/react): Centralized routing with React\n- [react-router](https://github.com/reacttraining/react-router): Declarative routing for React\n\n### Forms\n\n- [formik](https://github.com/jaredpalmer/formik): Forms in React, without tears 😭\n- [informative](https://github.com/bradwestfall/informative): React Forms with ease. Use render-props to broadcast state\n  changes for the Form and Field. Also first-class support for re-usable FieldWraps\n- [react-attire](https://github.com/gianmarcotoso/react-attire): Minimal state manager that simplifies React form handling\n- [react-final-form](https://github.com/final-form/react-final-form): 🏁 High performance subscription-based form state management for React\n- [react-form](https://github.com/react-tools/react-form): Simple, powerful, highly composable forms in React\n- [react-form-validation](https://github.com/semmiverian/react-form-validation): Forms Validation with built in rules for validating your input.\n- [react-uncontrolled-form](https://github.com/ericvaladas/react-uncontrolled-form): Forms with validation using uncontrolled fields in React\n\n### Inputs\n\n- [dayzed](https://github.com/deseretdigital/dayzed): Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components\n- [downshift](https://github.com/paypal/downshift): 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components\n- [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\n- [react-selected](https://github.com/jxom/react-selected): React component to build flexible and accessible radio buttons/elements.\n- [react-toggled](https://github.com/kentcdodds/react-toggled): Component to build simple, flexible, and accessible toggle components\n- [@navjobs/upload](https://github.com/navjobs/upload): Higher order React components for file uploading (with progress) react file upload\n\n### Data\n\n- [constate](https://github.com/diegohaz/constate): React context + state = constate\n- [holen](https://github.com/tkh44/holen): Declarative fetch for React\n- [react-apollo](https://github.com/apollographql/react-apollo): ♻️ React integration for Apollo Client\n- [react-aqueduct](https://github.com/kserjey/react-aqueduct): Declarative HTTP requests components\n- [react-data-sort](https://github.com/corjen/react-data-sort): React component for sorting, paginating and searching data\n- [react-firestore](https://github.com/green-arrow/react-firestore): Render prop components to fetch Firestore collections and documents\n- [react-gizmo](https://github.com/KadoBOT/react-gizmo): UI Finite State Machine for React\n- [react-localforage](https://github.com/tkh44/react-localforage): Declarative localForage in React\n- [react-powerplug](https://github.com/renatorib/react-powerplug): Renderless Pluggable State Containers\n- [react-redux-local](https://github.com/imflavio/react-redux-local): Simple local reducer with middleware/sagas/redux-dev-tools support.\n- [react-request](https://github.com/jmeas/react-request): Declarative HTTP requests for React with request deduplication and response caching\n- [react-senna](https://github.com/collardeau/react-senna): A store component to quickly initiate state and update handlers\n- [react-value](https://github.com/JedWatson/react-value): An easy easy way to wrap controlled components that provide `value` and `onChange` props with state.\n- [react-values](https://github.com/ianstormtaylor/react-values): ✨ A set of tiny, composable React components for handling state with render props.\n- [react-whisper](https://github.com/arturkulig/react-whisper): ☝️😮 Store, Reducer and Actor components for app-wide state management\n- [redebounce](https://github.com/axross/redebounce): debouncing the given value\n- [redux-box](https://github.com/anish000kumar/redux-box): Modular and easy-to-grasp redux based state management, with least boilerplate\n- [redux-render](https://github.com/jsonnull/redux-render): Ergonomic Redux bindings for React using render props\n- [repromised](https://github.com/axross/repromised): Declarative promise resolver\n- [statty](https://github.com/vesparny/statty): A tiny and unobtrusive state management library for React and Preact apps\n- [unstated](https://github.com/thejameskyle/unstated): Share state between components with the same stateful component API\n- [urql](https://github.com/FormidableLabs/urql): Universal React Query Library\n\n### Media\n\n- [nuka-carousel](https://github.com/FormidableLabs/nuka-carousel): React Carousel Component\n- [react-power-picture](https://github.com/tvthatsme/react-power-picture): Progressively load an image srcset for maximum responsiveness and performance\n- [react-progressive-image](https://github.com/FormidableLabs/react-progressive-image): React component for progressive image loading\n- [react-with-async-fonts](https://github.com/sergeybekrin/react-with-async-fonts): Module for dealing with custom web fonts\n\n### Scheduling\n\n- [react-pro-metronome](https://github.com/rigobauer/react-pro-metronome): React component for creating your own metronome\n- [react-sentinel](https://github.com/YurkaninRyan/react-sentinel): Abstracts away requestAnimationFrame, allowing you to poll anything for props\n- [react-t-minus](https://github.com/jxom/react-t-minus): A React component to handle simple countdowns.\n\n### Misc\n\n- [react-albus](https://github.com/americanexpress/react-albus): React component library for building declarative multi-step flows (wizards).\n- [react-device-battery](https://github.com/zanonnicola/react-device-battery): 🔋 Notifies your React App of the device battery status\n- [react-fns](https://github.com/jaredpalmer/react-fns): Browser API's turned into declarative React components and HoC's\n- [react-geolocation](https://github.com/tkh44/react-geolocation): Declarative geolocation in React\n- [react-google-maps-loader](https://github.com/xuopled/react-google-maps-loader): Simple loader to use google maps services\n- [react-google-calendar-events-list](https://github.com/VinSpee/react-gcal-events-list): React component which retrieves events from a google calendar.\n- [@foes/react-i18n-routing](https://github.com/FriendsOfECMAScript/ReactI18nRouting): 🌐 Missing i18n components and functions to bridge react-router and react-intl\n- [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer): Monitor when an element enters or leaves the browser viewport.\n- [react-loads](https://github.com/jxom/react-loads): A simple React component to handle loading state\n- [react-loops](https://github.com/leebyron/react-loops): Easily convert collections of any kind into lists of React elements with crystal clear syntax.\n- [react-media](https://github.com/reacttraining/react-media): CSS media queries for React\n- [react-pledge](https://github.com/petergombos/react-pledge): Declarative way to track promise lifecycle states using \"render props\"\n- [react-render-callback](https://github.com/sastan/react-render-callback): Implement \"render props\" in your components to render anything\n- [react-render-fam](https://github.com/danieldelcore/react-render-fam): Lit components for conditional rendering in React\n- [react-sizeme](https://github.com/ctrlplusb/react-sizeme): Make your React Components aware of their width and height!\n- [@tedconf/react-show-more](https://github.com/tedconf/react-show-more): A Unopinionated component to handle showing more items\n- [react-treefold](https://github.com/gnapse/react-treefold): A renderless tree component for your hierarchical React views\n- [react-useragent](https://github.com/jonstuebe/react-useragent): Retrieve user agent data through render props\n- [react-virtual-container](https://github.com/ctrlplusb/react-virtual-container): Optimise your React apps by only rendering components when in proximity to the viewport.\n\n### React Native\n\n- [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\n- [react-native-sideswipe](https://github.com/kkemple/react-native-sideswipe): React Native cross-platform carousel component based on FlatList\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/eric-erki%2Fawesome-react-render-props/projects"}