How to Toggle Visibility in React

How to Toggle Visibility in React

Building a customizable show/hide component
Ferenc Almasi β€’ 2023 February 16 β€’ Read time 6 min read
Learn how to create a customizable show/hide component for toggling visibility in React.
  • twitter
  • facebook
React Previous Tutorial

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.


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:

Copied to clipboard! Playground
<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

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.
πŸ” 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:

Copied to clipboard! Playground
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

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:

Copied to clipboard! Playground
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

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:  

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

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

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.

πŸ” 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:

Copied to clipboard! Playground
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

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 Reactinfo Remove ads

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
  • twitter
  • facebook
React
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.