How to Toggle Visibility in React

How to Toggle Visibility in React

Building a customizable show/hide component
Ferenc Almasi β€’ 2023 February 16 β€’ πŸ“– 6 min read

Building toggle elementsΒ β€” such as show/hide components, toggle hooks, or toggle buttonsΒ  β€” is a common feature you can likely come across when building web apps. Depending on the number of options, they can be either a simple wrapper for conditional rendering or a more robust component with customizability.

In this tutorial, we are going to take a look at how we can build a customizable show/hide component called ToggleVisibility using React hooks.

Looking to improve your skills? Check out our interactive course to master React from start to finish.
Master React

How ToggleVisibility Will Work

First, let's take a look at what we want to achieve. We want to have a component called ToggleVisibility, that wraps any number of elements, and adds a toggle button. We also want to customize it in a few ways:

<ToggleVisibility>
    <h1>With default settings</h1>
</ToggleVisibility>

<ToggleVisibility showLabel="πŸ‘€"  hideLabel="πŸ™ˆ">
    <h1>With custom labels</h1>
</ToggleVisibility>

<ToggleVisibility visible={false}>
    <h1>With default visibility</h1>
</ToggleVisibility>

<ToggleVisibility removeButton={true} visible={false}>
    <h1>One-time toggle</h1>
</ToggleVisibility>
How ToggleVisibility will work
Copied to clipboard!

The component will come with four different props for achieving different functionality. In order, they are:

  • showLabel: The button label for toggling the component ON. Defaults to "Show".
  • hideLabel: The button label for toggling the component OFF. Defaults to "Hide".
  • removeButton: A boolean to decide whether to remove the button after interaction for a one-time toggle. By default, this will be set to false.
  • visible: A boolean to decide the default visibility of the children. By default, this will be set to true, meaning the elements inside ToggleVisibility will be visible initially.
πŸ” Become a member or login to get access to the full source code in one piece. TypeScript types are also included.

Creating the Component with Show/Hide Functionality

To start things, let's first create the basic toggle functionality that will show/hide children elements. For this, all we need is a useState hook that conditionally renders children:

import React, { useState } from 'react'

const ToggleVisibility = ({ children }) => {
    const [show, setShow] = useState(true)

    return (
        <React.Fragment>
            {show && children}
            <button onClick={() => setShow(!show)}>
                {show ? 'Hide' : 'Show'}
            </button>
        </React.Fragment>
    )
}

export default ToggleVisibility
ToggleVisibility.tsx Toggling content on and off
Copied to clipboard!

Note that wrapping everything into a fragment allows us to avoid polluting the DOM. If you need custom styles, they can be replaced with a div.

To use the component, simply wrap an element inside ToggleVisibility after importing it. Right now, we have static labels with visibility set to true by default. Whenever we click on the button, it will set the show state to its opposite which will toggle the children on line:8. This works perfectly for some simple use cases, but let's see how to add labels and set the default visibility.

Toggling visibility of components in React
The ToggleVisibility component in action

Adding customizable labels and visibility

To make the labels configurable, we need to introduce two more props: showLabel and hideLabel. Extend the ToggleVisibility component with the highlighted parts:

const ToggleVisibility = ({
    showLabel = 'Show',
    hideLabel = 'Hide',
    children
}) => {
    const [show, setShow] = useState(true)

    return (
        <React.Fragment>
            {show && children}
            <button onClick={() => setShow(!show)}>
                {show ? hideLabel : showLabel}
            </button>
        </React.Fragment>
    )
ToggleVisibility.tsx Adding configurable labels
Copied to clipboard!

Now the component also accepts custom labels for show/hide. Using default parameters, we can tell React to treat the props as optional. In case they are not provided, the default values will be "Show" and "Hide". Don't forget to also update the label inside the button.

We also want to handle default visibility as well, so we can initially have a hidden component. To achieve this, add one more prop calledΒ visibleΒ to the component:Β Β 

const ToggleVisibility = ({
    ...
+   visible = true,
    children
}) => {
-   const [show, setShow] = useState(true)
+   const [show, setShow] = useState(visible)

    return (...)
}
ToggleVisibility.tsx Adding default visibility to the component
Copied to clipboard!

Notice that the default value of useState for the show state has been changed from false to visible. This is how state and props can work together. Now we can also tell the component to be hidden by default. This prop also takes advantage of default parameters.

πŸ” Become a member or login to get access to the full source code in one piece. TypeScript types are also included.

One-time toggles

There is one last thing we are missing, and that is adding the possibility for one-time toggles. This option will only let us toggle elements once, then the button gets removed from the DOM. To achieve this, we need another useState hook:

const ToggleVisibility = ({
    ...
    removeButton = false
}: ToggleVisibilityProps) => {
    const [showButton, setShowButton] = useState(true)

    const toggleVisibility = () => {
        setShow(!show)
        removeButton && setShowButton(false)
    }

    return (
        <React.Fragment>
            {show && children}
            {showButton && (
                <button onClick={toggleVisibility}>
                    {show ? hideLabel : showLabel}
                </button>
            )}
        </React.Fragment>
    )
}
ToggleVisibility.tsx Adding ability to do one-time toggles
Copied to clipboard!

By default, its value needs to be true, so that the button is always visible initially. We only update this value to false (on line:9), if the removeButton prop is set to true. This way, as soon as the button is clicked, it will be removed from the DOM. To keep the code clean, we can organize the button functionality into a separate function called toggleVisibility.

Looking to improve your skills? Check out our interactive course to master React from start to finish.
Master React

Conclusion

And with that said, now you have a fully customizable show/hide component ready for you to use in your project. Building toggle components in React is just a matter of usingΒ useStateΒ hooks with the right props.

Do you have any questions about the project? Share your thoughts in the comments below! If you would like to learn more about React, check out our previous project where you can learn how to validate forms in React. Thank you for reading through, happy coding! πŸ‘¨β€πŸ’»

How to Easily Validate Forms in React
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended