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

Commit b86c104

Browse files
author
rohandeshpande
committed
Added markdown-toc to dev dependencies, added TOC, fixed up README formatting
1 parent e3a05b0 commit b86c104

File tree

3 files changed

+265
-6
lines changed

3 files changed

+265
-6
lines changed

README.md

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,41 @@ This is a fully[*](#whats-missing) featured React port of Google's esteemed [dat
44

55
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.
66

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+
742
## Demo
843

944
[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
126161
* `title: string` - The folder title eg., `<DatFolder title='MyAwesomeFolder' />`
127162
* `children: array` - The child components to render
128163

129-
### DatNumber
164+
#### `DatNumber`
130165

131166
A number component for updating numeric values. Will render a slider if `min`, `max` and `step` props are supplied.
132167

@@ -138,7 +173,7 @@ A number component for updating numeric values. Will render a slider if `min`, `
138173
* `max: number` - The maximum range for the number
139174
* `step: number` - The amount the number should increment each tick
140175

141-
### `DatPresets`
176+
#### `DatPresets`
142177

143178
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.
144179

@@ -150,7 +185,7 @@ Each item in this array will need to be in the format `{ 'presetName': ...data,
150185

151186
* `options: array` - An array of objects, each in the format `{ 'presetName': ...data, ...preset }`
152187

153-
### `DatSelect`
188+
#### `DatSelect`
154189

155190
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.
156191

@@ -160,13 +195,17 @@ A select component for updating a value with one of the options supplied via the
160195

161196
* `options: array` - A simple array of options to select from eg., `<DatSelect path='fruits' options={['apple', 'orange', 'pear']} />`
162197

163-
### `DatString`
198+
#### `DatString`
164199

165200
A simple text input component that can be used to mutate strings.
166201

167202
## What's missing
168203

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.
170209

171210
## Roadmap
172211
* Loading and storing both default and preset data via `localStorage`

0 commit comments

Comments
 (0)