create-react-factory

create-react-factory create a factory for your react component. It allows you to:
+ compose multiple high order components
+ set a custom component to render using the component property

Installation



npm install create-react-factory





Usage

javascript

// Underline.js

import React from 'react'

import createReactFactory from 'create-react-factory'



export const Underline = ({component: Component = 'div', style = {}, ...props}) => (

  

)

export default Underline

export const factory = createReactFactory(Underline)

javascript

// Strong.js

import React from 'react'

import createReactFactory from 'create-react-factory'



export const Strong = ({component: Component = 'div', style = {}, ...props}) => (

  

)

export default Strong

export const factory = createReactFactory(Strong)

javascript

// Red.js

import React from 'react'

import createReactFactory from 'create-react-factory'



const Red = ({component: Component = 'div', style = {}, ...props}) => (

  

)

export default Red

export const factory = createReactFactory(Red)

javascript

// RedStrongUnderline.js

import {factory as strongFactory} from './Strong'

import {factory as redFactory} from './Red'

import Underline from './Underline'



export const RedStrongUnderline = strongFactory(redFactory(Underline))

export default RedStrongUnderline

javascript

import React from 'react'

import {render} from 'react-dom'

import Rsu from './RedStrongUnderline'



render(Hello World!, document.getElementById('root'))

// output:

// 

//   

//     Hello World!

//   

//

Why?

Because with the "traditional" factory approach, the component property is overridden by the Component passed to the factory. Thus it become impossible to set a different component to render.

License

MIT