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