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

Commit 2983bf9

Browse files
authored
Update README.md
1 parent b8e1869 commit 2983bf9

File tree

1 file changed

+13
-6
lines changed

1 file changed

+13
-6
lines changed

README.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ class App extends React.Component {
7373
7474
## Docs
7575
76-
### `DatGui`
76+
### `<DatGui />`
7777
7878
This is the main container component for your GUI and is the default export from the package.
7979
@@ -95,19 +95,26 @@ This is the main container component for your GUI and is the default export from
9595
| style | The style object to set on the `DatGui` div | object | null |
9696
9797
98-
### Components
98+
### Control Components
9999
100-
All of the `react-dat-gui` components should be rendered as children of your `DatGui` parent component.
100+
`react-dat-gui` comes with eight built-in control components which can be used by rendering them as direct children of `<DatGui />`. Custom control components can also be used so long as they implement the required props.
101101
102102
#### Common props
103103
104-
These components will have a number of props implicitly passed to them via the `DatGui` parent component's `renderChildren` method, but can also require other props to be passed explicitly to them.
104+
All child components of `<DatGui />` receive the following props implicitly, these are useful when building custom control components. See the built-in control components in [src/components](src/components) for examples of how to implement your own controls.
105105
106-
Below are docs for the required and optional props you can pass to each component. Check the `renderChildren` method of `src/index.js` to see which other props are passed down implicitly.
106+
| prop | Description | Type |
107+
|----------------|---------------------------------------------------------------------------------------------------------------------------|----------|
108+
| data | The data your dat.GUI controller will mutate, the same object from `<DatGui data={data} /> | object |
109+
| labelWidth | The width of the control name label | string |
110+
| liveUpdate | Determines if live updates should occur | boolean |
111+
| _onUpdateValue | A callback function for `<DatGui onUpdate={this.onUpdate} />, call this method to update dat.Gui state from your control. | function |
112+
113+
Below are docs for the required and optional props you can pass to each built-in control component.
107114

108115
##### required
109116

110-
- `path: string` - the path to the value within the `data` object which the component will control, eg., considering your object was `{ foo: 'bar' }`: `<DatString path='foo' />`
117+
- `path: string` - the path to the value within the `data` object which the component will control, eg., considering your object was `{ foo: 'bar' }`: `<DatString path='foo' />` or `{ foo: { bar: 'string' } }`: `<DatString path='foo.bar' />` for nested values.
111118
- Note, this prop is not required for the following components
112119
- `DatButton`
113120
- `DatFolder`

0 commit comments

Comments
 (0)