https://github.com/pfgray/chainable-components

A composable API for reusable React code.
https://github.com/pfgray/chainable-components

Last synced: 2 months ago
JSON representation

A composable API for reusable React code.

• Host: GitHub
• URL: https://github.com/pfgray/chainable-components
• Owner: pfgray
• License: mit
• Created: 2018-02-04T21:52:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T17:23:45.000Z (over 2 years ago)
• Last Synced: 2025-02-27T19:03:17.489Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.87 MB
• Stars: 85
• Watchers: 5
• Forks: 4
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Chainable Components

_A composable API for reusable React code._

Chain together reusable React components:

```jsx

withState(0).chain(outer => 

  withState(outer.value + 5).map(inner =>

    ({inner, outer})

  )

).render(({inner, outer}) => (

  


    
Outer: {outer.value}  outer.update(outer.value + 1)}>+

    
Inner: {inner.value}  inner.update(inner.value + 1)}>+

  

));

```


Transform HOCs and Render Props to chainables and back:

![Chainable pipeline](docsSrc/chainable-pipeline.png?raw=true "Chainable pipeline")

:point_down: Here's a blog post that introduces the API.  

[https://paulgray.net/chainable-components](https://paulgray.net/chainable-components)

Example:

```jsx

import { Route } from 'react-router';

import { connect } from 'react-redux';

const withConnect = fromHigherOrderComponent(connect(mapState, mapDispatch));

const withRoute = fromRenderProp(Route);

// withConnect and withRoute are now chainable!

const withConnectAndRoute = 

  withConnect.chain(storeProps => 

    withRoute.map(route => ({

      store: storeProps,

      path: route.history.location.pathname

    })));

// then render it!

withConnectAndRoute.render(({store, path}) => (

  


    current path is: {path}

    store contains: {store.users}

  

));


// or convert it back render prop:

const ConnectAndRoute = withConnectAndRoute.toRenderProp();

  {({store, path}) => (

    


      current path is: {path}

      store contains: {store.users}

    

  )}


// or convert it back to a HOC:

const connectAndRouteHoc = withConnectAndRoute.toHigherOrderComponent(p => p);

connectAndRouteHoc(({store, path}) => (

  


    current path is: {path}

    store contains: {store.users}

  

));

```