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.
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 dat.GUIs into your React app.
8
+
react-dat-gui 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 of the core components you will need to cleanly integrate dat.GUIs into your React app.
6
9
7
-
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.
The dat.GUI library is designed for easily updating and interacting with objects in real time. It is used extensively in canvas and WebGL rendering demos/apps for libraries such as [three.js](http://threejs.org) and is also commonly used in browser based editing software.
10
21
11
-
-[Demo](#demo)
12
-
-[Installation](#installation)
13
-
-[React Version](#react-version)
14
-
-[Usage](#usage)
22
+
## Contents
23
+
24
+
-[Basic Usage](#installation)
15
25
-[Docs](#docs)
16
-
-[`DatGui`](#datgui)
17
-
-[props](#props)
18
-
-[Components](#components)
19
-
-[Common props](#common-props)
20
-
-[`DatBoolean`](#datboolean)
21
-
-[`DatButton`](#datbutton)
22
-
-[`DatColor`](#datcolor)
23
-
-[`DatFolder`](#datfolder)
24
-
-[`DatNumber`](#datnumber)
25
-
-[`DatPresets`](#datpresets)
26
-
-[`DatSelect`](#datselect)
27
-
-[`DatString`](#datstring)
28
-
-[Scripts](#scripts)
29
-
-[`build`](#build)
30
-
-[`dev`](#dev)
31
-
-[`dev:migrate`](#devmigrate)
32
-
-[`dev:promote`](#devpromote)
33
-
-[`example`](#example)
34
-
-[`example:deploy`](#exampledeploy)
35
-
-[`test`](#test)
36
-
-[`test:watch`](#testwatch)
37
-
-[`lint`](#lint)
38
-
-[`lint:fix`](#lintfix)
39
-
-[`toc`](#toc)
26
+
-[Local Development](#local-development)
40
27
-[What's missing](#whats-missing)
41
28
-[Roadmap](#roadmap)
42
-
-[License](#license)
43
-
44
-
## Demo
45
-
46
-
[Checkout the demo!](https://claus.github.io/react-dat-gui/)
47
-
48
-
The demo is a deployed version of the latest production build of `./example`. There's also a `dev` directory where you can prototype changes to the source code easily. Both of these have been bootstrapped with `create-react-app`.
49
29
50
30
## Installation
51
31
52
32
```
53
33
npm install react-dat-gui --save
54
34
```
55
35
56
-
### React Version
36
+
##Basic Usage
57
37
58
-
React dat.GUI uses React and React-DOM `^16.0.0` aka React Fiber. It's recommended that you update your app's React version to align with this in order to avoid any issues.
59
-
60
-
## Usage
61
-
62
-
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. Here's how you might do that:
38
+
react-dat-gui has a wrapper component `<DatGUI />` and several control components that can be used to add functionality to the controller.
| `build` | Builds the library for production into `/dist` |
229
+
| `start` | Starts the library in development mode with hot module reloading |
230
+
| `test` | Runs unit testing suite powered by [Jest](https://github.com/facebook/jest) and [testing-library](https://github.com/testing-library/react-testing-library) |
231
+
| `lint` | Runs linting over entire codebase with `prettier`, `eslint` and `stylelint` |
232
+
| `lint-js` | Lints only javascript files |
233
+
| `lint-styles` | Lints only stylesheet files |
234
+
| `fix` | Runs linting over entire codebase with `prettier`, `eslint` and `stylelint` and applies any available automatic fixes |
235
+
| `fix-js` | Lints only javascript files and applies any available automatic fixes |
236
+
| `fix-styles` | Lints only stylesheet files and applies any available automatic fixes |
237
+
238
+
250
239
## What's missing
251
240
252
241
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. Animations for folder expanding/collapsing is also not currently implemented, but shouldn't be too hard to do.
0 commit comments