🎉 We just launched our new React course! Get it with 20% off! 🎉
How to Make Toggles With React Hooks

How to Make Toggles With React Hooks

Ferenc Almasi • 🔄 2021 February 08 • 📖 2 min read
  • twitter
  • facebook

To toggle between a boolean flag in React, you can use the below custom hook that uses setState internally:

import { useState } from 'react'

const useToggle = initialState => {
    const [state, setState] = useState(initialState || false);

    return [state, () => setState(!state)];
Copied to clipboard!

Since the function returns an array, with a state and a callback function, you can use it in your component, just like you would for other built-in React hooks, like so:

import React, { useState } from 'react'
import useToggle from 'useToggle'

const toggleComponent = () => {
    const [lightsOn, toggleLights] = useToggle();
    const [isVisible, toggleSidebar] = useToggle();

    return (
            <button onClick={toggleLights}>{lightsOn ? '🌞' : '🌒'}</button>;
            <button onClick={toggleSidebar}>Toggle sidebar</button>;
            <Sidebar visible={isVisible} />
Copied to clipboard!

If you would like to see it in action, give it a try on Codesandbox

Try the hook on codesandbox
How to Make Toggles With React Hooks
If you would like to see more Webtips, follow @flowforfrank

If you are interested in reading more about React hooks, see more examples for custom hooks or just learn about the basics, make sure to check out the article below.

All You Need to Know About React Hooks
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More