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
+13-6Lines changed: 13 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -73,7 +73,7 @@ class App extends React.Component {
73
73
74
74
## Docs
75
75
76
-
### `DatGui`
76
+
### `<DatGui/>`
77
77
78
78
This is the main container component for your GUI and is the default export from the package.
79
79
@@ -95,19 +95,26 @@ This is the main container component for your GUI and is the default export from
95
95
| style | The style object to set on the `DatGui` div | object | null |
96
96
97
97
98
-
### Components
98
+
### Control Components
99
99
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.
101
101
102
102
#### Common props
103
103
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.
105
105
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.
| 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.
107
114
108
115
##### required
109
116
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.
111
118
- Note, this prop is not required for the following components
0 commit comments