@render-props/toggle
v0.1.30 react render props function as child hoc state container toggle switch
Toggle
A state container which provides an interface for toggling between two values.
Installation
yarn add @render-props/toggle
or npm i @render-props/toggle
Usage
import Toggle from '@render-props/toggle'
function Toggler () {
return (
<Toggle
initialValue={true}
onValue={true/*default*/}
offValue={false/*default*/}
>
{({on, off, toggle, reset, value}) => (
<>
<button onClick={toggle}>
Toggle value to '{value === true ? 'false' : 'true'}'
</button>
<button onClick={on}>
Toggle 'on'
</button>
<button onClick={off}>
Toggle 'off'
</button>
<button onClick={reset}>
Reset value to initialValue
</button>
</>
)}
</Toggle>
)
}
Props
onValue {any}
: the value to set when theon()
method is called. Defaults totrue
.offValue {any}
: the value to set when theoff()
method is called. Defaults tofalse
.initialValue {any}
: the initial value of the component. This creates an uncontrolled component. Defaults to the value ofonValue
.value {any}
: the value of the component. This creates a controlled component which derives its state value from propsonChange {func}
: a callback which is invoked each time the value changes. Receives the new value as its only argument.
Render Props
Methods
toggle
: toggles value between the propsonValue
andoffValue
on
: sets value to the value provided via the proponValue
off
: sets value to the value provided via the propoffValue
reset
: sets value to theinitialValue
prop
State
value {any}
: the current value in the state
npm i @render-props/toggle
Source Code
github.com/jaredlunde/render...Metadata
- MIT
- Whatever
- Jared Lunde
- released 3/20/2019