hoc-react-datgui v0.0.5

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

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