useToggler

React, Hooks, State, Callback

Provides a boolean state variable that can be toggled between its two states.

  • Use the useState() hook to create the value state variable and its setter.
  • Create a function that toggles the value of the value state variable and memoize it, using the useCallback() hook.
  • Return the value state variable and the memoized toggler function.
const useToggler = initialState => {
  const [value, setValue] = React.useState(initialState);

  const toggleValue = React.useCallback(() => setValue(prev => !prev), []);

  return [value, toggleValue];
};
const Switch = () => {
  const [val, toggleVal] = useToggler(false);
  return <button onClick={toggleVal}>{val ? 'ON' : 'OFF'}</button>;
};
ReactDOM.render(<Switch />, document.getElementById('root'));

Recommended snippets

  • useHover

    React, Hooks

    Handles the event of hovering over the wrapped component.

  • useMergeState

    React, Hooks

    Creates a stateful value, and a function to update it by merging the new state provided.

  • useCopyToClipboard

    React, Hooks

    Copies the given text to the clipboard.