useBooleanState()

Create a boolean value state and functions to manipulate that state.

Basic Example

import React from 'react';
import {useVisibilityState} from 'webrix/hooks';
import './BasicExample.scss';
export default () => {
const {visible, show, hide, toggle} = useVisibilityState(true);
return (
<div>
{visible && <div className='box'/>}
<div className='controls'>
<div onClick={show}>Show</div>
<div onClick={hide}>Hide</div>
<div onClick={toggle}>Toggle</div>
</div>
</div>
);
};

In the above example we're using the

useVisibilityState
flavor of the hook to control the visibility of the box.

Examples

View Example
Menu
poppable
+3
View Example
DropDown
poppable
+3
View Example
Tooltip
poppable
+1
View Example
Movable & Resizable Modal
poppable
+3

Syntax

const {value, setTrue, setFalse, toggle, setValue} = useBooleanState(initial);

You can import other flavors of this hook. They only differ in the property names of the returned object:

const {visible, show, hide, toggle, setVisible} = useVisibilityState(initial);
const {focused, focus, blur, toggle, setFocused} = useFocusabilityState(initial);

Importing

// ESM
import {useBooleanState} from 'webrix/hooks';
import {useVisibilityState} from 'webrix/hooks';
import {useFocusabilityState} from 'webrix/hooks';
// For better tree shaking:
import {useBooleanState} from 'webrix/hooks/useBooleanState';
import {useVisibilityState} from 'webrix/hooks/useBooleanState';
import {useFocusabilityState} from 'webrix/hooks/useBooleanState';
// UMD
const {useBooleanState} = Webrix.hooks;
const {useVisibilityState} = Webrix.hooks;
const {useFocusabilityState} = Webrix.hooks;

Parameters

NametypeDefaultDescription
initial
boolean
false
The initial state

Return Value

Returns an

Object
with the following keys:

NameTypeDescription
value
booleanThe state's value.
setTrue
functionA function for setting
value
to
true
.
setFalse
functionA function for setting
value
to
false
.
toggle
functionA function for setting
value
to the opposite of its current value.
setValue
functionA function for manually setting the value of
value
.

Help us improve the docs

If something is missing or not entirely clear, please file an issue or edit this page.