react-crate

Crate is a way to compose and build components out of existing components.

Basic Usage

Running Here

import Crate from 'react-crate'
import recompose from 'react-crate/lib/recompose'
import rebass from 'react-crate/lib/rebass'
import loadable from 'react-crate/lib/loadable'

function myHoc (Wrapped) {
  return props => {
    return <Wrapped {...props} dispatch={console.log} />
  }
}

const MyCrate = Crate.of({
  recompose,
  rebass,
  loadable,
  myHoc: function () {
    return this.hoc(myHoc)
  }
})

const AsyncTestComponent = MyCrate.pure()
  .withRebass()
  .myHoc()
  .withProps({ injected: true })
  .asyncCompile({
    loader: () => import('./AsyncTestComponent'),
    LoadingComponent: Loading,
    delay: 200
  })

const Root = props => (
  <AsyncTestComponent p={16} color={'#343a40'} backgroundColor={'#f8f9fa'} />
)

Recompose

npm install recompose -S

import Crate from 'react-crate'
import recompose from 'react-crate/lib/recompose'

const MyCrate = Crate.of({
  recompose
  //...
})

MyCrate
  .mapProps(/*...*/)
  .withProps(/*...*/)
  .withPropsOnChange(/*...*/)
  .withHandlers(/*...*/)
  .defaultProps(/*...*/)
  .renameProp(/*...*/)
  .renameProps(/*...*/)
  .flattenProp(/*...*/)
  .withState(/*...*/)
  .withReducer(/*...*/)
  .branch(/*...*/)
  .renderComponent(/*...*/)
  .renderNothing()
  .shouldUpdate(/*...*/)
  .pure()
  .onlyUpdateForKeys(/*...*/)
  .onlyUpdateForPropTypes()
  .withContext(/*...*/)
  .getContext(/*...*/)
  .lifecycle(/*...*/)
  .toClass()
  .compile('div')

React Redux

npm install react-redux -S

import Crate from 'react-crate'
import reactRedux from 'react-crate/lib/react-redux'

const MyCrate = Crate.of({
  reactRedux
  //...
})

MyCrate
  .connect(/*...*/)
  .compile('div')

React Loadable

npm install react-loadable -S

import Crate from 'react-crate'
import loadable from 'react-crate/lib/loadable'

const MyCrate = Crate.of({
  loadable
  //...
})

MyCrate
  .asyncCompile({
    loader: () => import('./AsyncLoadedComponent'),
    LoadingComponent: Loading,
    delay: 200
  })

Rebass

npm install [email protected] -S

import Crate from 'react-crate'
import rebass from 'react-crate/lib/rebass'

const MyCrate = Crate.of({
  rebass
  //...
})

MyCrate
  .withRebass()
  .compile('div')