Skip to content

Commit

Permalink
📝 Docs and Versioning (#3)
Browse files Browse the repository at this point in the history
* add basic documentation
* update version and documentation
  • Loading branch information
bpetetot authored Apr 10, 2017
1 parent 7c5d623 commit 18c7e10
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 3 deletions.
52 changes: 51 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,51 @@
## hoc-react-datgui
## hoc-react-datgui

> HOC adding a `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/

See some examples at http://workshop.chromeexperiments.com/examples/gui.

### Getting started

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

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

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

const CompWithDatGui = withDatGuiFromProps(MyComponent)

<CompWithDatGui name="Benjamin" />
```
13 changes: 11 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
{
"name": "hoc-react-datgui",
"version": "0.1.0",
"version": "0.0.1",
"description": "HOC adding a dat.GUI plugged to React.Component props",
"main": "build/index.js",
"author": "Benjamin Petetot <bpetetot@gmail.com>",
"author": "Benjamin Petetot <benjamin.petetot@zenika.com>",
"license": "MIT",
"peerDependencies": {
"react": "^15.3.0"
Expand All @@ -29,6 +30,14 @@
"build": "cross-env BABEL_ENV=cjs babel --ignore \"*.spec.js\" ./src/ --out-dir build",
"test": "echo \"no tests\""
},
"repository": {
"type": "git",
"url": "git+https://github.com/Zenika/hoc-react-datgui.git"
},
"bugs": {
"url": "https://github.com/Zenika/hoc-react-datgui/issues"
},
"homepage": "https://github.com/Zenika/hoc-react-datgui#readme",
"keywords": [
"react",
"datgui",
Expand Down

0 comments on commit 18c7e10

Please sign in to comment.