├── README.md └── compositor.json /README.md: -------------------------------------------------------------------------------- 1 | # Awesome React Render Props 2 | 3 | Awesome list of React components with render props and resources. 4 | 5 | > PR's Welcome! 6 | 7 | ## Videos 8 | 9 | - [The State of Animation in React](https://www.youtube.com/watch?v=1tavDv5hXpo) by [Cheng Lou](https://twitter.com/_chenglou) 10 | - [Use Render Props with React](https://egghead.io/lessons/react-use-render-props-with-react) by [Kent C. Dodds](https://twitter.com/kentcdodds) 11 | 12 | ## Blog Posts / Articles 13 | 14 | - [Use a Render Prop!](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) by [Michael Jackson](https://twitter.com/mjackson) 15 | - [Query Components with Apollo](https://dev-blog.apollodata.com/query-components-with-apollo-ec603188c157) by [Kureev Alexey](https://twitter.com/kureevalexey) 16 | - [Testing ⚛️ components using render props](https://blog.kentcdodds.com/5623ab1814c) by [Kent C. Dodds](https://twitter.com/kentcdodds) 17 | - [How to give rendering control to users with prop getters](https://blog.kentcdodds.com/549eaef76acf) by [Kent C. Dodds](https://twitter.com/kentcdodds) 18 | 19 | ## Components 20 | 21 | ### Animation 22 | 23 | - [react-motion](https://github.com/chenglou/react-motion): A spring that solves your animation problems. 24 | - [react-move](https://github.com/react-tools/react-move): Beautiful, data-driven animations for React 25 | - [react-prop-transition](https://github.com/imranolas/react-prop-transition): Transition _almost_ any value over time. 26 | 27 | ### Interaction 28 | 29 | - [react-dragtastic](https://github.com/chrisjpatty/react-dragtastic): Declarative drag-and-drop for React 30 | 31 | ### Routing 32 | 33 | - [react-router](https://github.com/reacttraining/react-router): Declarative routing for React 34 | 35 | ### Forms 36 | 37 | - [Formik](https://github.com/jaredpalmer/formik): Forms in React, without tears 😭 38 | - [React Final Form](https://github.com/final-form/react-final-form): 🏁 High performance subscription-based form state management for React 39 | - [React Attire](https://github.com/gianmarcotoso/react-attire): Minimal state manager that simplifies React form handling 40 | - [Informative](https://github.com/bradwestfall/informative): React Forms with ease. Use render-props to broadcast state 41 | changes for the Form and Field. Also first-class support for re-usable FieldWraps 42 | - [React Form](https://github.com/react-tools/react-form): Simple, powerful, highly composable forms in React 43 | 44 | ### Inputs 45 | 46 | - [Downshift](https://github.com/paypal/downshift): 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components 47 | - [react-toggled](https://github.com/kentcdodds/react-toggled): Component to build simple, flexible, and accessible toggle components 48 | - [@navjobs/upload](https://github.com/navjobs/upload): Higher order React components for file uploading (with progress) react file upload 49 | - [Dayzed](https://github.com/deseretdigital/dayzed): Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components 50 | 51 | ### Data 52 | 53 | - [urql](https://github.com/FormidableLabs/urql): Universal React Query Library 54 | - [holen](https://github.com/tkh44/holen): Declarative fetch for React 55 | - [react-firestore](https://github.com/green-arrow/react-firestore): Render prop components to fetch Firestore collections and documents 56 | - [redux-box](https://github.com/anish000kumar/redux-box): Modular and easy-to-grasp redux based state management, with least boilerplate 57 | 58 | ### Misc 59 | 60 | - [react-fns](https://github.com/jaredpalmer/react-fns): Browser API's turned into declarative React components and HoC's 61 | - [react-media](https://github.com/reacttraining/react-media): CSS media queries for React 62 | - [react-value](https://github.com/JedWatson/react-value): An easy easy way to wrap controlled components that provide `value` and `onChange` props with state. 63 | - [react-redux-local](https://github.com/imflavio/react-redux-local): Simple local reducer with middleware/sagas/redux-dev-tools support. 64 | - [react-powerplug](https://github.com/renatorib/react-powerplug): Renderless Pluggable State Containers 65 | - [react-google-maps-loader](https://github.com/xuopled/react-google-maps-loader): Simple loader to use google maps services 66 | - [react-progressive-image](https://github.com/FormidableLabs/react-progressive-image): React component for progressive image loading 67 | - [react-device-battery](https://github.com/zanonnicola/react-device-battery): 🔋 Notifies your React App of the device battery status 68 | - [react-loads](https://github.com/jxom/react-loads): A simple React component to handle loading state 69 | - [react-data-sort](https://github.com/corjen/react-data-sort): React component for sorting, paginating and searching data 70 | - [redux-render](https://github.com/jsonnull/redux-render): Ergonomic Redux bindings for React using render props 71 | - [unstated](https://github.com/thejameskyle/unstated): Share state between components with the same stateful component API 72 | - [render-props-compose](https://github.com/gnapse/render-props-compose): Compose several nested render prop components into one 73 | - [react-useragent](https://github.com/jonstuebe/react-useragent): Retrieve user agent data through render props 74 | 75 | ### React Native 76 | 77 | - [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 78 | -------------------------------------------------------------------------------- /compositor.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jaredpalmer/awesome-react-render-props", 3 | "version": "0.1.4", 4 | "libraries": { 5 | "xv": "^1.1.25" 6 | }, 7 | "title": "Awesome Render Props", 8 | "branch": "", 9 | "style": { 10 | "name": "Brutalist", 11 | "componentSet": { 12 | "nav": "nav/BasicNav", 13 | "header": "header/BasicHeader", 14 | "article": "article/MarkdownArticle", 15 | "footer": "footer/BasicFooter" 16 | }, 17 | "fontFamily": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", 18 | "heading": {}, 19 | "typeScale": [ 20 | 48, 21 | 32, 22 | 20, 23 | 18, 24 | 16, 25 | 14, 26 | 12 27 | ], 28 | "layout": { 29 | "maxWidth": 1024, 30 | "fluid": true 31 | }, 32 | "colors": { 33 | "text": "#333", 34 | "background": "#fff", 35 | "primary": "#666", 36 | "secondary": "#888", 37 | "highlight": "#1f80ff", 38 | "muted": "#f6f6f6", 39 | "border": "#eee" 40 | } 41 | }, 42 | "content": [ 43 | { 44 | "component": "nav", 45 | "links": [ 46 | { 47 | "href": "https://github.com/jaredpalmer/awesome-react-render-props", 48 | "text": "GitHub" 49 | } 50 | ] 51 | }, 52 | { 53 | "component": "header", 54 | "heading": "awesome-react-render-props", 55 | "subhead": "😎 Awesome list of React components with render props", 56 | "children": [ 57 | { 58 | "component": "ui/TweetButton", 59 | "text": "awesome-react-render-props: 😎 Awesome list of React components with render props", 60 | "url": "" 61 | }, 62 | { 63 | "component": "ui/GithubButton", 64 | "user": "jaredpalmer", 65 | "repo": "awesome-react-render-props" 66 | } 67 | ] 68 | }, 69 | { 70 | "component": "article", 71 | "metadata": { 72 | "source": "github.readme" 73 | }, 74 | "html": "

Awesome React Render Props

\n

Awesome list of React components with render props and resources.

\n
\n

PR's Welcome!

\n
\n

Videos

\n\n

Blog Posts / Articles

\n\n

Components

\n

Animation

\n\n

Interaction

\n\n

Routing

\n\n

Forms

\n\n

Inputs

\n\n

Data

\n\n

Misc

\n\n

React Native

\n\n" 75 | }, 76 | { 77 | "component": "footer", 78 | "links": [ 79 | { 80 | "href": "https://github.com/jaredpalmer/awesome-react-render-props", 81 | "text": "GitHub" 82 | }, 83 | { 84 | "href": "https://github.com/jaredpalmer", 85 | "text": "jaredpalmer" 86 | } 87 | ] 88 | } 89 | ] 90 | } --------------------------------------------------------------------------------