HOC adding
dat.GUI
plugged toReact.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
Generate the dat.GUI
following the given model object.
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. |
Generate the dat.GUI
according to the input props of the wrapped component. (be careful, it doesn't check component propTypes)
import { withDatGuiFromProps } from 'hoc-react-datgui'
const CompWithDatGui = withDatGuiFromProps(MyComponent)
<CompWithDatGui name="Benjamin" />