You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on May 15, 2022. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+44-5Lines changed: 44 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,41 @@ This is a fully[*](#whats-missing) featured React port of Google's esteemed [dat
4
4
5
5
For those that haven't used or seen dat.GUI before, it's basically a GUI for updating and interacting with objects in real time. 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.
6
6
7
+
## TOC
8
+
9
+
-[Demo](#demo)
10
+
-[Installation](#installation)
11
+
-[Usage](#usage)
12
+
-[Docs](#docs)
13
+
*[`DatGui`](#datgui)
14
+
+[props](#props)
15
+
-[required](#required)
16
+
-[optional](#optional)
17
+
*[Components](#components)
18
+
+[Common props](#common-props)
19
+
-[required](#required-1)
20
+
-[optional](#optional-1)
21
+
+[`DatBoolean`](#datboolean)
22
+
+[`DatButton`](#datbutton)
23
+
-[props](#props-1)
24
+
*[required](#required-2)
25
+
+[`DatColor`](#datcolor)
26
+
+[`DatFolder`](#datfolder)
27
+
-[props](#props-2)
28
+
*[required](#required-3)
29
+
+[`DatNumber`](#datnumber)
30
+
-[props](#props-3)
31
+
*[optional](#optional-2)
32
+
+[`DatPresets`](#datpresets)
33
+
-[props](#props-4)
34
+
*[required](#required-4)
35
+
+[`DatSelect`](#datselect)
36
+
-[props](#props-5)
37
+
*[required](#required-5)
38
+
+[`DatString`](#datstring)
39
+
-[What's missing](#whats-missing)
40
+
-[Roadmap](#roadmap)
41
+
7
42
## Demo
8
43
9
44
[Checkout the demo!](http://rohandeshpande.com/react-dat-gui)
@@ -126,7 +161,7 @@ Component which wraps other components to render them within an expandable/colla
126
161
*`title: string` - The folder title eg., `<DatFolder title='MyAwesomeFolder' />`
127
162
*`children: array` - The child components to render
128
163
129
-
###DatNumber
164
+
#### `DatNumber`
130
165
131
166
A number component for updating numeric values. Will render a slider if `min`, `max` and `step` props are supplied.
132
167
@@ -138,7 +173,7 @@ A number component for updating numeric values. Will render a slider if `min`, `
138
173
*`max: number` - The maximum range for the number
139
174
*`step: number` - The amount the number should increment each tick
140
175
141
-
### `DatPresets`
176
+
####`DatPresets`
142
177
143
178
Presets for the object which your `DatGui` is controlling can be supplied to this component as items in its `options` prop. A select field will be rendered which will allow you to easily switch between the presets.
144
179
@@ -150,7 +185,7 @@ Each item in this array will need to be in the format `{ 'presetName': ...data,
150
185
151
186
*`options: array` - An array of objects, each in the format `{ 'presetName': ...data, ...preset }`
152
187
153
-
### `DatSelect`
188
+
####`DatSelect`
154
189
155
190
A select component for updating a value with one of the options supplied via the `options` prop. The original value from the `path` will always be added to the passed options array as the first item.
156
191
@@ -160,13 +195,17 @@ A select component for updating a value with one of the options supplied via the
160
195
161
196
*`options: array` - A simple array of options to select from eg., `<DatSelect path='fruits' options={['apple', 'orange', 'pear']} />`
162
197
163
-
### `DatString`
198
+
####`DatString`
164
199
165
200
A simple text input component that can be used to mutate strings.
166
201
167
202
## What's missing
168
203
169
-
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.
204
+
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.
205
+
206
+
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 if you just slam it into the browser and pass it an object. 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 and so it's been left out for now.
207
+
208
+
Local storage however is in the roadmap and will probably be done very soon.
170
209
171
210
## Roadmap
172
211
* Loading and storing both default and preset data via `localStorage`
0 commit comments