hoc-react-datgui
Version:
HOC adding a dat.GUI plugged to React.Component props
53 lines (36 loc) • 1.52 kB
Markdown
## hoc-react-datgui
> HOC adding `dat.GUI` plugged to `React.Component` props.
_*Library currently in development*_
### What's dat.GUI ?
`dat.GUI` is a lightweight graphical user interface for changing variables in JavaScript. Written by https://github.com/dataarts/
### Getting started
```
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']}
})
<CompWithDatGui name="Benjamin" />
```
The model is an object descripting the `dat.GUI` 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)
<CompWithDatGui name="Benjamin" />
```