create-react-factory
React component factory factory
Last updated 3 years ago by cahnory .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install create-react-factory 
SYNC missed versions from official npm registry.

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

// Underline.js
import React from 'react'
import createReactFactory from 'create-react-factory'

export const Underline = ({component: Component = 'div', style = {}, ...props}) => (
  <Component style={{...style, textDecoration: 'underline'}} {...props} />
)
export default Underline
export const factory = createReactFactory(Underline)
// Strong.js
import React from 'react'
import createReactFactory from 'create-react-factory'

export const Strong = ({component: Component = 'div', style = {}, ...props}) => (
  <Component style={{...style, fontWeight: 'bold'}} {...props} />
)
export default Strong
export const factory = createReactFactory(Strong)
// Red.js
import React from 'react'
import createReactFactory from 'create-react-factory'

const Red = ({component: Component = 'div', style = {}, ...props}) => (
  <Component style={{...style, color: 'red'}} {...props} />
)
export default Red
export const factory = createReactFactory(Red)
// 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
import React from 'react'
import {render} from 'react-dom'
import Rsu from './RedStrongUnderline'

render(<ul><Rsu component="li">Hello World!</Rsu></ul>, document.getElementById('root'))
// output:
// <ul>
//   <li style="color: red; font-weight: bold; text-decoration: underline;">
//     Hello World!
//   </li>
// </ul>

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

Current Tags

  • 0.2.1                                ...           latest (3 years ago)

3 Versions

  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (15)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |