A heart-shaped toggle switch component for React. Inspired by Tore Bernhoft's I heart toggle Dribbble shot and Aaron Iker's Codepen.
## 📖 Table of Contents
- [🚀 Getting Started](#-getting-started)
- [⚡️ Quick Start](#%EF%B8%8F-quick-start)
- [💻 Live Demo](#-live-demo)
- [⚙️ Configuration](#%EF%B8%8F-configuration)
- [♿️ Accessibility](#%EF%B8%8F-accessibility)
- [👨🏼⚖️ License](#%EF%B8%8F-license)
## 🚀 Getting Started
### ⚡️ Quick Start
```shell
npm install @anatoliygatt/heart-switch @emotion/react @emotion/styled
```
```jsx
import { useState } from 'react';
import { HeartSwitch } from '@anatoliygatt/heart-switch';
function Example() {
const [checked, setChecked] = useState(false);
return (
{
setChecked(event.target.checked);
}}
/>
);
}
```
### 💻 Live Demo
[](https://codesandbox.io/s/demo-for-anatoliygatt-heart-switch-cds5p)
## ⚙️ Configuration
`HeartSwitch` supports the following props:
| Prop | Type | Default value | Description |
| ------------------------ | ------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| size | string | `sm` | The size of the toggle switch. There are 3 available sizes:
`sm` — 36x25px
`md` — 54x37.5px
`lg` — 72x50px
|
| inactiveTrackFillColor | string | `#ffffff` | The fill color of the track when the toggle switch is in an inactive/off state. |
| inactiveTrackStrokeColor | string | `#d1d1d1` | The stroke color of the track when the toggle switch is in an inactive/off state. |
| activeTrackFillColor | string | `#ff708f` | The fill color of the track when the toggle switch is in an active/on state. |
| activeTrackStrokeColor | string | `#ff4e74` | The stroke color of the track when the toggle switch is in an active/on state. |
| disabledTrackFillColor | string | `#f2f2f2` | The fill color of the track when the toggle switch is in a disabled state. |
| disabledTrackStrokeColor | string | `#d1d1d1` | The stroke color of the track when the toggle switch is in a disabled state. |
| invalidTrackFillColor | string | `#ffffff` | The fill color of the track when the toggle switch is in an invalid state. |
| invalidTrackStrokeColor | string | `#d1d1d1` | The stroke color of the track when the toggle switch is in an invalid state. |
| inactiveThumbColor | string | `#ffffff` | The color of the thumb when the toggle switch is in an inactive/off state. |
| activeThumbColor | string | `#ffffff` | The color of the thumb when the toggle switch is in an active/on state. |
| disabledThumbColor | string | `#ffffff` | The color of the thumb when the toggle switch is in a disabled state. |
| invalidThumbColor | string | `#ffffff` | The color of the thumb when the toggle switch is in an invalid state. |
| thumbShadowColor | string | `rgb(23 23 23 / 0.25)` | The color of the thumb's shadow. |
| thumbFocusRingColor | string | `rgb(59 130 246 / 0.5)` | The color of the thumb's focus ring. |
The majority of the native `` attributes are also supported; namely, `autoFocus`, `checked`, `defaultChecked`, `disabled`, `form`, `name`, `required`, `value`, `id`, `title`, `tabIndex`, `aria-disabled`, `aria-label`, `aria-describedby`, `aria-labelledby`, `onBlur`, `onChange`, `onFocus` and `onInvalid`.
`HeartSwitch` also supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). If `ref` is passed, it will be forwarded to the underlying `` element. It can be especially useful when we want to use `HeartSwitch` as an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html).
## ♿️ Accessibility
In order to comply with the web accessibility standards, we must make use of an `aria-label` or `aria-labelledby` attribute, like so:
```jsx
function AccessibleExample() {
return ;
}
```
Also, it is recommended to use an `aria-disabled` instead of a `disabled` attribute to make `HeartSwitch` immutable but focusable, like so:
```jsx
function AccessibleAndDisabledExample() {
return (
);
}
```
## 👨🏼⚖️ License
[MIT](https://github.com/anatoliygatt/heart-switch/blob/master/LICENSE)
