ToggleSwitch

A simple toggle switch component that can be used to set boolean values either within the react script, or in a PUT request if wrapped in the WithEndpoint custom hook. Provides access to an onClick event handler method that can be provided through the properties to perform custom actions when toggled.

Properties

• checked (boolean)

  the state of the toggle switch. Can be used to automatically update, should this input change without the toggle switch being used, for whatever reason, or it can be used to reference the state of the toggle switch from another component.

• id (string)

  Unique identifier for the toggle switch, used to ensure the label is correctly identified for accessibility options, such as screen readers.

• label (string)

  The Text label for the toggle switch, which should describe what the switch does.

• onClick (javascript function)

  A method that should handle the Click event for the toggle switch.

const onToggled = (event) => {
    console.log(event);
    setToggled(event.target.value);
}
const [toggled, setToggled] = useState(false);
...
<ToggleSwitch checked={toggled} id="example_toggle" label="Example" onClick={onToggled}/>