A graphical user interface for changing states in react. Inspired from Google's popular dat.GUI controller library. This library provides additional functionalities such as Ease curve editor, Draggable placement and Stylable component's. For styling this library uses Zeit styled-jsx.
npm install react-gui-controller --saveimport React, { Component } from "react";
import Gui, { GuiString, GuiNumber, GuiColor } from "react-gui-controller";
class App extends Component {
state = {
data: {
text: "Some Awesome Val",
noise: 0.4,
background: "#dc6900",
foreground: "#b7c485"
}
};
update = data => {
this.setState({
data
});
};
render() {
const { data } = this.state;
return (
<Gui data={data} theme="dark" onUpdate={this.update}>
<GuiString path="text" label="Head" />
<GuiNumber path="noise" label="Noise" min={0} max={1} step={0.1} />
<GuiColor path="background" label="Background" type="hex" />
<GuiColor path="foreground" label="Foreground" type="hex" />
</Gui>
);
}
}
export default App;Gui is the wrapper component which will create a new gui container and will distribute the data prop to other
child component's. This component will handle all the unidirectional data flow between the state data and child
component's with the help of onUpdate functional prop.
data- The data your Gui controller will mutate.onUpdate- The method which will be called whenever an update is handled by the controller.children- The dat.GUI components that make up the controller.
theme- The theme selector aslightordark, default islight.
...
state = {
data: {
...
}
};
update = data => {
this.setState({
data
});
};
render() {
const { data } = this.state;
return (
<Gui data={data} theme="dark" onUpdate={this.update}>
...
</Gui>
);
}
...GuiString is used to mutate any kind of string.
path- The state data object key.
...
state = {
data: {
text: "Some Awesome Value"
}
};
update = data => {
this.setState({
data
});
};
render() {
const { data } = this.state;
return (
<Gui data={data} theme="dark" onUpdate={this.update}>
<GuiString path="text" label="Head" />
</Gui>
);
}
...GuiNumber provides a range slider to toggle between whole and decimal values.
path- The state data object key, this will eventually going to be the initial value.min- The minimum value of the slider.max- The maximum value of the slider.step- The change in value of the slider.
...
state = {
data: {
noise: 0.4
}
};
update = data => {
this.setState({
data
});
};
render() {
const { data } = this.state;
return (
<Gui data={data} theme="dark" onUpdate={this.update}>
<GuiNumber path="noise" label="Noise" min={0} max={1} step={0.1} />
</Gui>
);
}
...GuiBool provides a switch button to toggle between true and false.
path- The state data object key, this will eventually going to be the initial value.
...
state = {
data: {
gravity: false
}
};
update = data => {
this.setState({
data
});
};
render() {
const { data } = this.state;
return (
<Gui data={data} theme="dark" onUpdate={this.update}>
<GuiBool path="gravity" label="Gravity"/>
</Gui>
);
}
...GuiButton provides a button, under which you can specify the onClick prop and mention the
funtion.
onClickmention the method present on the parent component which you want to invoke.
...
state = {
data: {
...
}
};
update = data => {
this.setState({
data
});
};
handleButton=()=>{
console.log('Button click occured')
}
render() {
const { data } = this.state;
return (
<Gui data={data} theme="dark" onUpdate={this.update}>
<GuiButton onClick={this.handleButton} label="Submit"/>
</Gui>
);
}
...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.
options- In the options prop we need to proved an array of options.path- The state data object key, this will eventually going to be the initial value.
...
state = {
data: {
framerate: '30fps'
}
};
update = data => {
this.setState({
data
});
};
render() {
const { data } = this.state;
return (
<Gui data={data} theme="dark" onUpdate={this.update}>
<GuiSelect path='framerate' options={['25fps', '30fps', '40fps', '60fps']} label="Framerate"/>
</Gui>
);
}
...A color picker component which can be used to mutate any specific colo type.
type- Mention the type of color format you are using.hex,rgb&hslare the format's available.path- The state data object key, this will eventually going to be the initial value.
...
state = {
data: {
background: '#b7c485'
// background: {
// r:255,
// g:0,
// b:0
// }
}
};
update = data => {
this.setState({
data
});
};
render() {
const { data } = this.state;
return (
<Gui data={data} theme='dark' onUpdate={this.update}>
<GuiColor path='background' type='hex' label='Background' />
</Gui>
);
}
...
In source folder:
npm run lib:watch
npm linkIn project:
npm link react-gui-controller- Support for local storage.
- Ease curve pre defined graphs.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent