Skip to content
This repository was archived by the owner on May 15, 2022. It is now read-only.

Commit e3d8e54

Browse files
Added first draft of updates
1 parent fa59c4f commit e3d8e54

File tree

1 file changed

+34
-13
lines changed

1 file changed

+34
-13
lines changed

README.md

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,51 @@
11
# React dat.GUI
22

3-
Currently very much under construction.
3+
This is a fully[*](#whats-missing) featured React port of Google's esteemed [dat.GUI](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage) controller library. It comes packed with all the core components you'll need to cleanly integrate a `dat.GUI` into your React app.
4+
5+
For those that haven't used or seen dat.GUI before, it's basically an object mutation GUI. It's used extensively in canvas or WebGL rendering demos/apps for libraries such as [three.js](http://threejs.org) but it can also be used to build browser based editing software.
46

57
## Demo
68

7-
https://react-dat-gui.herokuapp.com/
9+
http://rohandeshpande.com/react-dat-gui
810

911
## Installation
1012

1113
```
12-
npm install react-dat-gui --save
14+
npm i -S react-dat-gui
15+
1316
```
1417

1518
## Usage
1619

20+
First you'll need a wrapper component which will handle the updates from your dat.GUI, this component should pass the data for the GUI to control as well as an `onUpdate` function to the `DatGui` container component as props. These props are then passed down to all children.
21+
1722
```
18-
<Dat data={this.state.data} onUpdate={this.handleUpdate}>
19-
<DatString path="string" label="String" />
20-
<DatNumber path="number" label="Number" min={0} max={100} step={1} />
21-
<DatBoolean path="boolean" label="Boolean" />
22-
<DatButton label="Button" onClick={this.handleClick} />
23-
</Dat>
23+
// TODO code sample
2424
```
2525

26-
## CSS
2726

28-
* SCSS: `./src/Dat.scss`
29-
* CSS: `./lib/Dat.css`
30-
* CSS minified: `./build/react-dat-gui.min.css`
27+
Any updates will update the state of the `DatGui` component and trigger whatever else needs to happen in your `onUpdate` method.
28+
29+
## Components
30+
31+
### DatGui
32+
33+
This is the main container component for your GUI.
34+
35+
### `DatString`
36+
37+
A simple string component that can be used
38+
39+
### DatNumber
40+
41+
A number component, for updating numeric values.
42+
43+
#### props
44+
45+
## What's missing
46+
47+
There are still a few features from the original implementation missing from this package. These are mainly related to saving and loading data as well as local storage. For the first, I think the fact that this is now an npm module sort of goes against it handling this sort of stuff. Google's original concept was basically a plug and play controller that could do everything, however in module form, it's expected that you'll most likely be integrating this with an existing application. In that case, you'll probably have pretty specific needs around how you would like to save/load data into your GUI. Local storage however is in the roadmap and will probably be done very soon.
48+
49+
## Roadmap
50+
* Loading and storing both default and preset data via `localStorage`
51+
* Time travel with undo/redo buttons (edited)

0 commit comments

Comments
 (0)