react-crate

2.0.1 • Public • Published

React Crate - Fill Your Crate
react-crate

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

npm version Build Status codecov

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 rebass@0.4.0-beta.9 -S
import Crate from 'react-crate'
import rebass from 'react-crate/lib/rebass'
 
const MyCrate = Crate.of({
  rebass
  //...
})
 
MyCrate
  .withRebass()
  .compile('div')
 

Dependents (0)

Package Sidebar

Install

npm i react-crate

Weekly Downloads

0

Version

2.0.1

License

MIT

Last publish

Collaborators

  • tkh44