# dis-gui-lifetoys
> This repo was forked from [wwwtyro/dis-gui](https://github.com/wwwtyro/dis-gui) and includes the following notable changes:
> - Babel 6 was updated to Babel 7 configured with `preset-env` and `preset-react`
> - React 16 was updated to React 18
> - Added `install-peers-cli` package and `npm run prepare` script to install peer dependencies
> - Added `styled-components` package
> - Range slider now uses a styled `input[type=range]` instead of a custom control
>
> Additional Notes:
> - The components are still using `componentWillReceiveProps()` to update state synchronously such that a re-render is not triggered. Each component has specific UX concerns that require investigation and dev testing. In some cased, `componentDidUpdate()` seems like an appropriate replacement. In other cases, another method may be more suitable.
An extensible, styleable, & React-based controller library inspired by the
venerable [dat-gui](https://github.com/dataarts/dat.gui).
The above was created with the following JSX:
```js
import * as dg from 'dis-gui-lifetoys';
...
```
## Demo
Try out the [live demo](https://dietrich-stein.github.io/dis-gui-lifetoys).
## Installation
`npm install dis-gui-lifetoys`
> Note: dis-gui-lifetoys has peer dependencies react@^18.0.0 react-dom@^18.0.0
## Events
The **onChange** event is fired when a control's value changes:
```js
```
The **onFinishChange** event fires when the user performs some action that
indicates that they are finished changing a value, like hitting enter or tabbing
out of a text or number field, or releasing a mouse button after dragging a
number range thumb:
```js
```
The **Button** control fires an **onClick** event:
```js
```
## Numbers
If you provide a **min** and **max** prop to the **Number** control, you'll get
a range slider and a number field:
```js
```
If you don't, it won't:
```js
```
If the user enters a value that is not a number, the **onChange** and
**onFinishChange** event will not fire, and the value will be highlighted
with the value defined by **lowlighterr** in the **style** property of the
**GUI** component:
## Folders
Nest controls to arbitrary depth with the **Folder** component:
```js
```
Pass the **expanded** prop a boolean to indicate if the folder
should start out open or closed:
```js
```
## Styling
Pass a **style** property to the **GUI** component to change its
appearance:
```js
```
You can change the width of the labels and controls:
```js
```
And you can position the whole thing:
```js
```
## Colors
**Color** controls take **red**, **green**, and **blue** props as numbers from
zero to 255:
```js
```
...and return an object like the following in their **onChange** and **onFinishChange**
events:
```js
{
red: 64,
green: 128,
blue: 255
}
```
**Color** controls can be expanded by clicking on them, or you can pass the
**expanded** prop a boolean to expand them by default:
```js
```
## Gradients
The **Gradient** control takes a **stops** prop, which is an array of objects
that have **red**, **green**, **blue**, and **stop** properties. The color
properties behave identically to the **Color** control, and the **stop** property
is a number from zero to one that represents the position of the stop.
```js
```
Like the **Color** control, the **Gradient** control will expand when the user
clicks it or if you add the **expanded** boolean property set to **true**:
```js
```
## Roadmap
* Add documentation about extending `dis-gui-lifetoys`.