Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anatoliygatt/heart-switch
❤️ A heart-shaped toggle switch component for React.
https://github.com/anatoliygatt/heart-switch
accessible component javascript react react-component switch toggle toggle-switch typescript
Last synced: about 2 months ago
JSON representation
❤️ A heart-shaped toggle switch component for React.
- Host: GitHub
- URL: https://github.com/anatoliygatt/heart-switch
- Owner: anatoliygatt
- License: mit
- Created: 2022-02-16T17:04:31.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-05T11:20:03.000Z (over 1 year ago)
- Last Synced: 2024-09-16T09:28:38.068Z (3 months ago)
- Topics: accessible, component, javascript, react, react-component, switch, toggle, toggle-switch, typescript
- Language: TypeScript
- Homepage: https://heart-switch.netlify.app
- Size: 5.24 MB
- Stars: 442
- Watchers: 2
- Forks: 16
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-react-components - @anatoliygatt/heart-switch - [demo](https://codesandbox.io/s/demo-for-anatoliygatt-heart-switch-cds5p) - A fully themeable and accessible heart-shaped toggle switch component. (UI Components / Form Components)
- awesome-react-components - @anatoliygatt/heart-switch - [demo](https://codesandbox.io/s/demo-for-anatoliygatt-heart-switch-cds5p) - A fully themeable and accessible heart-shaped toggle switch component. (UI Components / Form Components)
- fucking-awesome-react-components - @anatoliygatt/heart-switch - 🌎 [demo](codesandbox.io/s/demo-for-anatoliygatt-heart-switch-cds5p) - A fully themeable and accessible heart-shaped toggle switch component. (UI Components / Form Components)
- awesome-react - heart-switch - A heart-shaped toggle switch component for React (**Awesome React** [](https://github.com/sindresorhus/awesome) / React)
README
heart-switch
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)