zenika / hoc-react-datgui Goto Github PK

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

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).

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" />