Crate is a way to compose and build components out of existing components.
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'} />
)
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')
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')
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
})
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')