https://github.com/cahnory/create-react-factory
React component factory factory
https://github.com/cahnory/create-react-factory
factory higher-order-component react reactjs
Last synced: about 2 months ago
JSON representation
React component factory factory
- Host: GitHub
- URL: https://github.com/cahnory/create-react-factory
- Owner: cahnory
- Created: 2017-02-09T14:43:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-15T08:57:12.000Z (over 9 years ago)
- Last Synced: 2025-06-04T21:23:16.460Z (about 1 year ago)
- Topics: factory, higher-order-component, react, reactjs
- Language: JavaScript
- Size: 3.91 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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!
// 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](https://tldrlegal.com/license/mit-license)