How to create custom toggle button in React

Creating custom elements for different projects is always challenging. Most of the time we rely on third party libraries but there is not much for customization and its hard to customize them according to our needs. In this article we will gonna learn how to create custom toggle button in React.

Custom toggle button

Our motive is to create a React component which will gonna have toggle button functionality with all necessary styling and logic. For creating this custom toggle button we are gonna use only two divs.

The first div will be the outside container with light background and the 2nd div will be our YES/NO text div.

After that we will gonna add toggle functionality and some transition to make it smooth.

Creating custom toggle button

To create this component lets add two divs to our render method.

 <div className="toggle-container" onClick={toggleSelected}>
        <div className={`dialog-button ${selected ? "" : "disabled"}`}>
          {selected ? "YES" : "NO"}
        </div>
      </div>

So we have a parent div with onClick event and one child div which have 2 classes and 2 diff text according to its current state.

We will gonna get selected and toggleSelected props from the parent component.

 const { selected, toggleSelected } = this.props;

Our component will gonna look like this in the end.

import PropTypes from "prop-types";
import React, { Component } from "react";

import "./toggleButton.css";

export class ToggleButton extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { selected, toggleSelected } = this.props;
    return (
      <div className="toggle-container" onClick={toggleSelected}>
        <div className={`dialog-button ${selected ? "" : "disabled"}`}>
          {selected ? "YES" : "NO"}
        </div>
      </div>
    );
  }
}

ToggleButton.propTypes = {
  selected: PropTypes.bool.isRequired,
  toggleSelected: PropTypes.func.isRequired
};

As you can see we only have 2 props and one styling file. The styling is very important here to show the smooth transition toggle effect.

The dialog-button class will gonna have child div at the right side and disabled class will move the child div to the left side.

Our styling will gonna look like this.

.toggle-container {
  width: 70px;
  background-color: #c4c4c4;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  padding: 2px;
  height: 32px;
  position: relative;
}

.dialog-button {
  font-size: 14px;
  line-height: 16px;
  font-weight: bold;
  cursor: pointer;
  background-color: #002b49;
  color: white;
  padding: 8px 12px;
  border-radius: 18px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  min-width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  min-width: unset;
  border-radius: 3px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  position: absolute;
  left: 34px;
  transition: all 0.3s ease;
}

.disabled {
  background-color: #707070;
  left: 2px;
}

Usage

To use our custom component we will just import it and gonna pass two required props.

import React, { useState } from "react";

import { ToggleButton } from "./toggleButton";
import "./styles.css";

export default function App() {
  const [selected, setSelected] = useState(false);
  return (
    <div className="App">
      <ToggleButton
        selected={selected}
        toggleSelected={() => {
          setSelected(!selected);
        }}
      />
    </div>
  );
}

Now we will gonna get this output in our web page. I hope you have learned how to create custom toggle button and you can see demo of this from below button.

How to create custom checkbox in React

Comments

[Sandy Garrido]

This is great! It really helped me understand some core concepts as I implemented this with a light&dark theme switcher.
Thanks a bunch @narendersaini32