javascript - How to add text inside a Toggle Switch Component in React? - Stack Overflow

admin管理员组

文章数量:1318573

How can I add text inside a Switch ponent in ReactJS? I am trying to add EN and PT text inside the Switch Component.

I'm not using any lib, I built the ponent with only css, because I needed it to have this specific customization, so I found it easier to do with css.

I put my project into codesandbox

import React from "react";
import "./switch.css";

const Switch = ({ isOn, handleToggle, onColor }) => {
  return (
    <>
      <input
        checked={isOn}
        onChange={handleToggle}
        className="react-switch-checkbox"
        id={`react-switch-new`}
        type="checkbox"
      />
      <label
        style={{ background: isOn && onColor }}
        className="react-switch-label"
        htmlFor={`react-switch-new`}
      >
        <span className={`react-switch-button`} />
      </label>
    </>
  );
};

export default Switch;

.react-switch-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
}

.react-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: #fff;
  position: relative;
  transition: background-color 0.2s;
}

.react-switch-label .react-switch-button {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 45px;
  height: 45px;
  transition: 0.2s;
  background: #000;
  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
}

.react-switch-checkbox:checked + .react-switch-label .react-switch-button {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.react-switch-label:active .react-switch-button {
  width: 60px;
}

How can I add text inside a Switch ponent in ReactJS? I am trying to add EN and PT text inside the Switch Component.

I'm not using any lib, I built the ponent with only css, because I needed it to have this specific customization, so I found it easier to do with css.

I put my project into codesandbox

import React from "react";
import "./switch.css";

const Switch = ({ isOn, handleToggle, onColor }) => {
  return (
    <>
      <input
        checked={isOn}
        onChange={handleToggle}
        className="react-switch-checkbox"
        id={`react-switch-new`}
        type="checkbox"
      />
      <label
        style={{ background: isOn && onColor }}
        className="react-switch-label"
        htmlFor={`react-switch-new`}
      >
        <span className={`react-switch-button`} />
      </label>
    </>
  );
};

export default Switch;

.react-switch-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
}

.react-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: #fff;
  position: relative;
  transition: background-color 0.2s;
}

.react-switch-label .react-switch-button {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 45px;
  height: 45px;
  transition: 0.2s;
  background: #000;
  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
}

.react-switch-checkbox:checked + .react-switch-label .react-switch-button {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.react-switch-label:active .react-switch-button {
  width: 60px;
}

Thank you very much for any help!!

• javascript
• html
• css
• reactjs

Share Improve this question Follow asked Jan 13, 2021 at 13:41 TainaraTainara 33711 gold badge55 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Take a look at my fork of your sandbox. First of all, I moved the <input> into the <label> so it doesn't require the id/htmlFor structure that would break due to duplicate id's once you use multiple switches.

The text spans are now in their own div inside the label. They each have 50% width, are aligned to the left and right edges respectively and use flexbox to center their contents.

Depending on the width of the white area in either state of the checkbox, you might want to change the spans' width to center the text correctly. Also, the label texts can be moved to a property for reusability.

本文标签： javascriptHow to add text inside a Toggle Switch Component in ReactStack Overflow