react-gui-controller
Table Of Contents
Introduction
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.
Installation
npm install react-gui-controller --save
Usage
;; state = data: text: "Some Awesome Val" noise: 04 background: "#dc6900" foreground: "#b7c485" ; { this; }; { const data = thisstate; return <Gui data=data theme="dark" onUpdate=thisupdate> <GuiString path="text" label="Head" /> <GuiNumber path="noise" label="Noise" min=0 max=1 step=01 /> <GuiColor path="background" label="Background" type="hex" /> <GuiColor path="foreground" label="Foreground" type="hex" /> </Gui> ; } ;
Docs
Gui
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.
required props
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.
optional props
theme
- The theme selector aslight
ordark
, default islight
.
... state = data: ... ; { this; }; { const data = thisstate; return <Gui data=data theme="dark" onUpdate=thisupdate> ... </Gui> ; } ...
GuiString
GuiString
is used to mutate any kind of string.
required props
path
- The state data object key.
... state = data: text: "Some Awesome Value" ; { this; }; { const data = thisstate; return <Gui data=data theme="dark" onUpdate=thisupdate> <GuiString path="text" label="Head" /> </Gui> ; }...
GuiNumber
GuiNumber
provides a range slider to toggle between whole and decimal values.
required props
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: 04 ; { this; }; { const data = thisstate; return <Gui data=data theme="dark" onUpdate=thisupdate> <GuiNumber path="noise" label="Noise" min=0 max=1 step=01 /> </Gui> ; }...
GuiBool
GuiBool
provides a switch button to toggle between true
and false
.
required props
path
- The state data object key, this will eventually going to be the initial value.
... state = data: gravity: false ; { this; }; { const data = thisstate; return <Gui data=data theme="dark" onUpdate=thisupdate> <GuiBool path="gravity" label="Gravity"/> </Gui> ; }...
GuiButton
GuiButton
provides a button, under which you can specify the onClick
prop and mention the
funtion.
required props
onClick
mention the method present on the parent component which you want to invoke.
... state = data: ... ; { this; }; { console } { const data = thisstate; return <Gui data=data theme="dark" onUpdate=thisupdate> <GuiButton onClick=thishandleButton label="Submit"/> </Gui> ; }...
GuiSelect
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.
required props
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' ; { this; }; { const data = thisstate; return <Gui data=data theme="dark" onUpdate=thisupdate> <GuiSelect path='framerate' options='25fps' '30fps' '40fps' '60fps' label="Framerate"/> </Gui> ; }...
GuiColor
A color picker component which can be used to mutate any specific colo type.
required props
type
- Mention the type of color format you are using.hex
,rgb
&hsl
are 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 // } ; { this; }; { const data = thisstate; return <Gui data=data theme='dark' onUpdate=thisupdate> <GuiColor path='background' type='hex' label='Background' /> </Gui> ; }...
Demo
Demo1
Development
In source folder:
npm run lib:watchnpm link
In project:
npm link react-gui-controller
Stuff to get done
- Support for local storage.
- Ease curve pre defined graphs.
License
MIT