compositor.json

{
  "name": "jaredpalmer/awesome-react-render-props",
  "version": "0.1.4",
  "libraries": {
    "xv": "^1.1.25"
  },
  "title": "Awesome Render Props",
  "branch": "",
  "style": {
    "name": "Brutalist",
    "componentSet": {
      "nav": "nav/BasicNav",
      "header": "header/BasicHeader",
      "article": "article/MarkdownArticle",
      "footer": "footer/BasicFooter"
    },
    "fontFamily": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
    "heading": {},
    "typeScale": [
      48,
      32,
      20,
      18,
      16,
      14,
      12
    ],
    "layout": {
      "maxWidth": 1024,
      "fluid": true
    },
    "colors": {
      "text": "#333",
      "background": "#fff",
      "primary": "#666",
      "secondary": "#888",
      "highlight": "#1f80ff",
      "muted": "#f6f6f6",
      "border": "#eee"
    }
  },
  "content": [
    {
      "component": "nav",
      "links": [
        {
          "href": "https://github.com/jaredpalmer/awesome-react-render-props",
          "text": "GitHub"
        }
      ]
    },
    {
      "component": "header",
      "heading": "awesome-react-render-props",
      "subhead": "😎 Awesome list of React components with render props",
      "children": [
        {
          "component": "ui/TweetButton",
          "text": "awesome-react-render-props: 😎 Awesome list of React components with render props",
          "url": ""
        },
        {
          "component": "ui/GithubButton",
          "user": "jaredpalmer",
          "repo": "awesome-react-render-props"
        }
      ]
    },
    {
      "component": "article",
      "metadata": {
        "source": "github.readme"
      },
      "html": "<h1>Awesome React Render Props</h1>\n<p>Awesome list of React components with render props and resources.</p>\n<blockquote>\n<p>PR&apos;s Welcome!</p>\n</blockquote>\n<h2>Videos</h2>\n<ul>\n<li><a href=\"https://www.youtube.com/watch?v=1tavDv5hXpo\">The State of Animation in React</a> by <a href=\"https://twitter.com/_chenglou\">Cheng Lou</a></li>\n<li><a href=\"https://egghead.io/lessons/react-use-render-props-with-react\">Use Render Props with React</a> &#x1F4B2; by <a href=\"https://twitter.com/kentcdodds\">Kent C. Dodds</a></li>\n<li><a href=\"https://egghead.io/lessons/react-refactor-a-higher-order-component-to-a-render-prop-component\">Refactor a HoC to a Render Prop Component</a> by <a href=\"https://twitter.com/andrewdelprete\">Andrew Del Prete</a></li>\n<li><a href=\"https://egghead.io/lessons/react-unit-test-a-react-render-prop-component\">Unit test a React Render Prop component</a> &#x1F4B2; by <a href=\"https://twitter.com/andrewdelprete\">Andrew Del Prete</a></li>\n<li><a href=\"https://egghead.io/lessons/react-integration-test-a-react-component-that-consumes-a-render-prop\">Integration test a React component that consumes a Render Prop</a> &#x1F4B2; by <a href=\"https://twitter.com/andrewdelprete\">Andrew Del Prete</a></li>\n<li><a href=\"https://egghead.io/lessons/react-compose-render-prop-components-with-react-adopt\">Compose render prop components with React Adopt</a> by <a href=\"https://twitter.com/andrewdelprete\">Andrew Del Prete</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=BcVAq3YFiuc\">Never Write Another HoC</a> by <a href=\"https://twitter.com/mjackson\">Michael Jackson</a></li>\n</ul>\n<h2>Blog Posts / Articles</h2>\n<ul>\n<li><a href=\"https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce\">Use a Render Prop!</a> by <a href=\"https://twitter.com/mjackson\">Michael Jackson</a></li>\n<li><a href=\"https://dev-blog.apollodata.com/query-components-with-apollo-ec603188c157\">Query Components with Apollo</a> by <a href=\"https://twitter.com/kureevalexey\">Kureev Alexey</a></li>\n<li><a href=\"https://blog.kentcdodds.com/5623ab1814c\">Testing &#x269B;&#xFE0F; components using render props</a> by <a href=\"https://twitter.com/kentcdodds\">Kent C. Dodds</a></li>\n<li><a href=\"https://blog.kentcdodds.com/549eaef76acf\">How to give rendering control to users with prop getters</a> by <a href=\"https://twitter.com/kentcdodds\">Kent C. Dodds</a></li>\n<li><a href=\"https://medium.com/dailyjs/reacts--new-context-api-70c9fe01596b\">React&#x2019;s &#x269B;&#xFE0F; new Context API</a> (uses a render prop, includes handy examples) by <a href=\"https://twitter.com/kentcdodds\">Kent C. Dodds</a></li>\n</ul>\n<h2>Components</h2>\n<h3>Animation</h3>\n<ul>\n<li><a href=\"https://github.com/brunnolou/react-morph\">react-morph</a>: Morphing Ui transitions made simple</li>\n<li><a href=\"https://github.com/react-tools/react-move\">react-move</a>: Beautiful, data-driven animations for React</li>\n<li><a href=\"https://github.com/chenglou/react-motion\">react-motion</a>: A spring that solves your animation problems.</li>\n<li><a href=\"https://github.com/imranolas/react-prop-transition\">react-prop-transition</a>: Transition <em>almost</em> any value over time.</li>\n<li><a href=\"https://github.com/drcmda/react-spring\">react-spring</a>: &#x1F64C; Helping react-motion and animated to become best friends</li>\n</ul>\n<h3>Composition</h3>\n<ul>\n<li><a href=\"https://github.com/pedronauck/react-adopt\">react-adopt</a>: &#x1F60E; Compose render props components like a pro.</li>\n<li><a href=\"https://github.com/jmeas/react-composer\">react-composer</a>: Compose render prop components</li>\n<li><a href=\"https://github.com/gnapse/render-props-compose\">render-props-compose</a>: Compose several nested render prop components into one</li>\n<li><a href=\"https://github.com/danwang/retainer\">@danwang/retainer</a>: Compose render prop components by lifting computation into containers</li>\n</ul>\n<h3>Interaction</h3>\n<ul>\n<li><a href=\"https://github.com/atlassian/react-beautiful-dnd\">react-beautiful-dnd</a>: Beautiful, accessible drag and drop for lists with React</li>\n<li><a href=\"https://github.com/chrisjpatty/react-dragtastic\">react-dragtastic</a>: Declarative drag-and-drop for React</li>\n<li><a href=\"https://github.com/nihgwu/stickyard\">stickyard</a>: Make your component sticky the easy way</li>\n</ul>\n<h3>Routing</h3>\n<ul>\n<li><a href=\"https://curi.js.org/packages/@curi/react\">@curi/react</a>: Centralized routing with React</li>\n<li><a href=\"https://github.com/reacttraining/react-router\">react-router</a>: Declarative routing for React</li>\n</ul>\n<h3>Forms</h3>\n<ul>\n<li><a href=\"https://github.com/jaredpalmer/formik\">formik</a>: Forms in React, without tears &#x1F62D;</li>\n<li><a href=\"https://github.com/bradwestfall/informative\">informative</a>: React Forms with ease. Use render-props to broadcast state\nchanges for the Form and Field. Also first-class support for re-usable FieldWraps</li>\n<li><a href=\"https://github.com/gianmarcotoso/react-attire\">react-attire</a>: Minimal state manager that simplifies React form handling</li>\n<li><a href=\"https://github.com/final-form/react-final-form\">react-final-form</a>: &#x1F3C1; High performance subscription-based form state management for React</li>\n<li><a href=\"https://github.com/react-tools/react-form\">react-form</a>: Simple, powerful, highly composable forms in React</li>\n<li><a href=\"https://github.com/semmiverian/react-form-validation\">react-form-validation</a>: Forms Validation with built in rules for validating your input.</li>\n<li><a href=\"https://github.com/ericvaladas/react-uncontrolled-form\">react-uncontrolled-form</a>: Forms with validation using uncontrolled fields in React</li>\n</ul>\n<h3>Inputs</h3>\n<ul>\n<li><a href=\"https://github.com/deseretdigital/dayzed\">dayzed</a>: Primitives to build simple, flexible, WAI-ARIA compliant React date-picker components</li>\n<li><a href=\"https://github.com/paypal/downshift\">downshift</a>: &#x1F3CE; Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components</li>\n<li><a href=\"https://github.com/sghall/react-compound-slider\">react-compound-slider</a>: React Compound Slider is a tiny (5kb) slider component with no opinion about markup or styles</li>\n<li><a href=\"https://github.com/jxom/react-selected\">react-selected</a>: React component to build flexible and accessible radio buttons/elements.</li>\n<li><a href=\"https://github.com/kentcdodds/react-toggled\">react-toggled</a>: Component to build simple, flexible, and accessible toggle components</li>\n<li><a href=\"https://github.com/navjobs/upload\">@navjobs/upload</a>: Higher order React components for file uploading (with progress) react file upload</li>\n</ul>\n<h3>Data</h3>\n<ul>\n<li><a href=\"https://github.com/diegohaz/constate\">constate</a>: React context + state = constate</li>\n<li><a href=\"https://github.com/tkh44/holen\">holen</a>: Declarative fetch for React</li>\n<li><a href=\"https://github.com/apollographql/react-apollo\">react-apollo</a>: &#x267B;&#xFE0F; React integration for Apollo Client</li>\n<li><a href=\"https://github.com/kserjey/react-aqueduct\">react-aqueduct</a>: Declarative HTTP requests components</li>\n<li><a href=\"https://github.com/corjen/react-data-sort\">react-data-sort</a>: React component for sorting, paginating and searching data</li>\n<li><a href=\"https://github.com/green-arrow/react-firestore\">react-firestore</a>: Render prop components to fetch Firestore collections and documents</li>\n<li><a href=\"https://github.com/KadoBOT/react-gizmo\">react-gizmo</a>: UI Finite State Machine for React</li>\n<li><a href=\"https://github.com/tkh44/react-localforage\">react-localforage</a>: Declarative localForage in React</li>\n<li><a href=\"https://github.com/renatorib/react-powerplug\">react-powerplug</a>: Renderless Pluggable State Containers</li>\n<li><a href=\"https://github.com/imflavio/react-redux-local\">react-redux-local</a>: Simple local reducer with middleware/sagas/redux-dev-tools support.</li>\n<li><a href=\"https://github.com/jmeas/react-request\">react-request</a>: Declarative HTTP requests for React with request deduplication and response caching</li>\n<li><a href=\"https://github.com/collardeau/react-senna\">react-senna</a>: A store component to quickly initiate state and update handlers</li>\n<li><a href=\"https://github.com/JedWatson/react-value\">react-value</a>: An easy easy way to wrap controlled components that provide <code>value</code> and <code>onChange</code> props with state.</li>\n<li><a href=\"https://github.com/ianstormtaylor/react-values\">react-values</a>: &#x2728; A set of tiny, composable React components for handling state with render props.</li>\n<li><a href=\"https://github.com/arturkulig/react-whisper\">react-whisper</a>: &#x261D;&#xFE0F;&#x1F62E; Store, Reducer and Actor components for app-wide state management</li>\n<li><a href=\"https://github.com/axross/redebounce\">redebounce</a>: debouncing the given value</li>\n<li><a href=\"https://github.com/anish000kumar/redux-box\">redux-box</a>: Modular and easy-to-grasp redux based state management, with least boilerplate</li>\n<li><a href=\"https://github.com/jsonnull/redux-render\">redux-render</a>: Ergonomic Redux bindings for React using render props</li>\n<li><a href=\"https://github.com/axross/repromised\">repromised</a>: Declarative promise resolver</li>\n<li><a href=\"https://github.com/vesparny/statty\">statty</a>: A tiny and unobtrusive state management library for React and Preact apps</li>\n<li><a href=\"https://github.com/thejameskyle/unstated\">unstated</a>: Share state between components with the same stateful component API</li>\n<li><a href=\"https://github.com/FormidableLabs/urql\">urql</a>: Universal React Query Library</li>\n</ul>\n<h3>Media</h3>\n<ul>\n<li><a href=\"https://github.com/FormidableLabs/nuka-carousel\">nuka-carousel</a>: React Carousel Component</li>\n<li><a href=\"https://github.com/tvthatsme/react-power-picture\">react-power-picture</a>: Progressively load an image srcset for maximum responsiveness and performance</li>\n<li><a href=\"https://github.com/FormidableLabs/react-progressive-image\">react-progressive-image</a>: React component for progressive image loading</li>\n<li><a href=\"https://github.com/sergeybekrin/react-with-async-fonts\">react-with-async-fonts</a>: Module for dealing with custom web fonts</li>\n</ul>\n<h3>Scheduling</h3>\n<ul>\n<li><a href=\"https://github.com/rigobauer/react-pro-metronome\">react-pro-metronome</a>: React component for creating your own metronome</li>\n<li><a href=\"https://github.com/YurkaninRyan/react-sentinel\">react-sentinel</a>: Abstracts away requestAnimationFrame, allowing you to poll anything for props</li>\n<li><a href=\"https://github.com/jxom/react-t-minus\">react-t-minus</a>: A React component to handle simple countdowns.</li>\n</ul>\n<h3>Misc</h3>\n<ul>\n<li><a href=\"https://github.com/americanexpress/react-albus\">react-albus</a>: React component library for building declarative multi-step flows (wizards).</li>\n<li><a href=\"https://github.com/zanonnicola/react-device-battery\">react-device-battery</a>: &#x1F50B; Notifies your React App of the device battery status</li>\n<li><a href=\"https://github.com/jaredpalmer/react-fns\">react-fns</a>: Browser API&apos;s turned into declarative React components and HoC&apos;s</li>\n<li><a href=\"https://github.com/tkh44/react-geolocation\">react-geolocation</a>: Declarative geolocation in React</li>\n<li><a href=\"https://github.com/xuopled/react-google-maps-loader\">react-google-maps-loader</a>: Simple loader to use google maps services</li>\n<li><a href=\"https://github.com/VinSpee/react-gcal-events-list\">react-google-calendar-events-list</a>: React component which retrieves events from a google calendar.</li>\n<li><a href=\"https://github.com/FriendsOfECMAScript/ReactI18nRouting\">@foes/react-i18n-routing</a>: &#x1F310; Missing i18n components and functions to bridge react-router and react-intl</li>\n<li><a href=\"https://github.com/thebuilder/react-intersection-observer\">react-intersection-observer</a>: Monitor when an element enters or leaves the browser viewport.</li>\n<li><a href=\"https://github.com/jxom/react-loads\">react-loads</a>: A simple React component to handle loading state</li>\n<li><a href=\"https://github.com/reacttraining/react-media\">react-media</a>: CSS media queries for React</li>\n<li><a href=\"https://github.com/petergombos/react-pledge\">react-pledge</a>: Declarative way to track promise lifecycle states using &quot;render props&quot;</li>\n<li><a href=\"https://github.com/sastan/react-render-callback\">react-render-callback</a>: Implement &quot;render props&quot; in your components to render anything</li>\n<li><a href=\"https://github.com/danieldelcore/react-render-fam\">react-render-fam</a>: Lit components for conditional rendering in React</li>\n<li><a href=\"https://github.com/ctrlplusb/react-sizeme\">react-sizeme</a>: Make your React Components aware of their width and height!</li>\n<li><a href=\"https://github.com/tedconf/react-show-more\">@tedconf/react-show-more</a>: A Unopinionated component to handle showing more items</li>\n<li><a href=\"https://github.com/gnapse/react-treefold\">react-treefold</a>: A renderless tree component for your hierarchical React views</li>\n<li><a href=\"https://github.com/jonstuebe/react-useragent\">react-useragent</a>: Retrieve user agent data through render props</li>\n<li><a href=\"https://github.com/ctrlplusb/react-virtual-container\">react-virtual-container</a>: Optimise your React apps by only rendering components when in proximity to the viewport.</li>\n</ul>\n<h3>React Native</h3>\n<ul>\n<li><a href=\"https://github.com/wKovacs64/react-native-responsive-image-view\">react-native-responsive-image-view</a>: React Native component for scaling an Image within the parent View</li>\n<li><a href=\"https://github.com/kkemple/react-native-sideswipe\">react-native-sideswipe</a>: React Native cross-platform carousel component based on FlatList</li>\n</ul>\n"
    },
    {
      "component": "footer",
      "links": [
        {
          "href": "https://github.com/jaredpalmer/awesome-react-render-props",
          "text": "GitHub"
        },
        {
          "href": "https://github.com/jaredpalmer",
          "text": "jaredpalmer"
        }
      ]
    }
  ]
}