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.

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)

import { withDatGuiFromProps } from 'hoc-react-datgui'

const CompWithDatGui = withDatGuiFromProps(MyComponent)

<CompWithDatGui name="Benjamin" />