HOC adding a dat.GUI plugged to React.Component props
npm install hoc-react-datgui> HOC adding dat.GUI plugged to React.Component props.
_Library currently in development_
dat.GUI is a lightweight graphical user interface for changing variables in JavaScript. Written by https://github.com/dataarts/
```
npm install hoc-react-datgui
#### withDatGui(Component, model)
Generate the dat.GUI following the given model object.
`jsx
import { withDatGui } from 'hoc-react-datgui'
const CompWithDatGui = withDatGui(MyComponent, {
name: { type: 'string', defaultValue: 'noname' },
age: { type: 'number', min: 1, max: 99, step: 1 },
gender: { type: 'enum', values: ['Male', 'Female']}
})
`dat.GUI
The model is an object descripting the component. All keys must match with the component props (name and type).
property | description
---------|-----------
| type | string, number, enum, object, array, function, color |defaultValue
| | default value of the property. |max
| | only for number |min
| | only for number |step
| | only for number. |values
| | only for enum. Array of values for an enum property.|
#### withDatGuiFromProps(Component)
Generate the dat.GUI according to the input props of the wrapped component. (be careful, it doesn't check component propTypes)
`jsx
import { withDatGuiFromProps } from 'hoc-react-datgui'
const CompWithDatGui = withDatGuiFromProps(MyComponent)
``