@tdcerhverv/switch

Switch component

Usage

Import like this:

import { Switch } from '@tdcerhverv/switch';

Use like this:

<Switch label={labelText} />

or if you need html tags in the label

<Switch>
  Activate for <strong>double bacon</strong>!!
</Switch>

Usage Example

Here's an example of a realistic use case.

function DarkMode() {
  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)')
    .matches;
  const [isOn, setIsOn] = useState(prefersDarkMode);

  return (
    <Switch label="Dark Mode" active={isOn} onChange={() => setIsOn(!isOn)} />
  );
}

Props

The Switch component extends general HTMLInputElement type, and supports, apart from type, all standard properties plus some more.

export interface ISwitch
  extends Omit<
    React.DetailedHTMLProps<
      React.InputHTMLAttributes<HTMLInputElement>,
      HTMLInputElement
    >,
    'type'
  > {
  label?: string;
  labelRequired?: string;
  active?: boolean;
  error?: boolean | string;
}

When a switch is required, you must supply a value labelRequired as well.

Known issues & To-do's

• Improve tests
• Add "passive" state
  • e.g. disable interaction while waiting for a request to complete.
• Add interface support for ref
• Improve HTML5 validation support