https://github.com/zenika/hoc-react-datgui

HOC adding dat.GUI plugged to React.Component props.
https://github.com/zenika/hoc-react-datgui

datgui graphic-user-interface gui hoc react

Last synced: 2 months ago
JSON representation

HOC adding dat.GUI plugged to React.Component props.

• Host: GitHub
• URL: https://github.com/zenika/hoc-react-datgui
• Owner: Zenika
• Created: 2017-04-10T13:45:35.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-18T09:26:44.000Z (almost 8 years ago)
• Last Synced: 2024-10-13T15:55:29.147Z (3 months ago)
• Topics: datgui, graphic-user-interface, gui, hoc, react
• Language: JavaScript
• Homepage:
• Size: 136 KB
• Stars: 5
• Watchers: 23
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 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']}

})

```

 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)

```