@tdcerhverv/switch
v1.2.1
Published
Switches toggle the state of a single setting on or off. They are the preferred way to adjust settings on mobile.
Downloads
5
Maintainers
Keywords
Readme
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