React-React crate: Trying new ways to compose components

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 [email protected] -S
import Crate from 'react-crate'
import rebass from 'react-crate/lib/rebass'

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

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

Comments

  • Add render visualizer
    Add render visualizer

    Mar 21, 2017

    Prior Art: https://github.com/redsunsoft/react-render-visualizer

    Reply
  • Add lifecycle fns
    Add lifecycle fns

    Mar 13, 2017

                                                                                                                                                                                                            new method 
    Reply
  • New method request:  `branch`
    New method request: `branch`

    Mar 13, 2017

                                                                                                                                                                                                            new method 
    Reply