diff --git a/README.md b/README.md index 616873e..83c0d8f 100644 --- a/README.md +++ b/README.md @@ -1 +1,51 @@ -## hoc-react-datgui \ No newline at end of file +## 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']} +}) + + +``` + 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) + + +``` \ No newline at end of file diff --git a/package.json b/package.json index d8f8596..d95ea2e 100644 --- a/package.json +++ b/package.json @@ -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 ", + "author": "Benjamin Petetot ", "license": "MIT", "peerDependencies": { "react": "^15.3.0" @@ -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",