ToggleButton

ToggleButton.tsx

import React, { useState, useCallback } from 'react';
import './ToggleButton.css';

type ToggleButtonProps = {
  label: string;
  onToggle: (isChecked: boolean) => void;
}

const ToggleButton = (props: ToggleButtonProps) => {
  const { label, onToggle } = props;
  const [isChecked, setIsChecked] = useState<boolean>(false);

  const handleToggle = useCallback(() => {
    const newValue = !isChecked;
    setIsChecked(newValue);
    onToggle(newValue);
  }, [isChecked, onToggle]);

  return (
    <div className="toggle-button">
      <input type="checkbox" checked={isChecked} onChange={handleToggle} />
      <label>{label}</label>
    </div>
  );
};

export default ToggleButton;

Usage

const handleToggle = (isChecked: boolean) => {
  console.log(`Toggle button value changed to ${isChecked}`);
}

<ToggleButton label="Toggle me" onToggle={handleToggle} />

ToggleButton.module.css

.toggle-button {
  display: flex;
  align-items: center;
  margin: 5px;
}

.toggle-button input[type="checkbox"] {
  margin-right: 10px;
}

.toggle-button label {
  font-size: 14px;
  font-weight: bold;
}