0.1.30 • Published 5 years ago
@render-props/toggle v0.1.30
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
0.1.30
5 years ago
0.1.29
5 years ago
0.1.28
5 years ago
0.1.27
5 years ago
0.1.26
6 years ago
0.1.25
6 years ago
0.1.24
6 years ago
0.1.23
6 years ago
0.1.22
6 years ago
0.1.21
6 years ago
0.1.20
6 years ago
0.1.19
6 years ago
0.1.18
6 years ago
0.1.17
6 years ago
0.1.16
6 years ago
0.1.15
6 years ago
0.1.14
6 years ago
0.1.13
6 years ago
0.1.12
6 years ago
0.1.11
6 years ago
0.1.10
6 years ago
0.1.9
6 years ago
0.1.8
6 years ago
0.1.7
6 years ago
0.1.6
6 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago
0.1.0-alpha
6 years ago