{"id":13422113,"url":"https://github.com/anatoliygatt/heart-switch","last_synced_at":"2025-03-15T10:31:40.325Z","repository":{"id":38172850,"uuid":"460099036","full_name":"anatoliygatt/heart-switch","owner":"anatoliygatt","description":"❤️ A heart-shaped toggle switch component for React.","archived":false,"fork":false,"pushed_at":"2023-06-05T11:20:03.000Z","size":5494,"stargazers_count":445,"open_issues_count":6,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T03:48:47.584Z","etag":null,"topics":["accessible","component","javascript","react","react-component","switch","toggle","toggle-switch","typescript"],"latest_commit_sha":null,"homepage":"https://heart-switch.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anatoliygatt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-16T17:04:31.000Z","updated_at":"2025-02-26T19:30:12.000Z","dependencies_parsed_at":"2024-05-03T10:00:01.825Z","dependency_job_id":null,"html_url":"https://github.com/anatoliygatt/heart-switch","commit_stats":{"total_commits":134,"total_committers":3,"mean_commits":"44.666666666666664","dds":"0.23880597014925375","last_synced_commit":"4aca4ba53610c6d517b3e138c78e760e30d77d14"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anatoliygatt%2Fheart-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anatoliygatt%2Fheart-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anatoliygatt%2Fheart-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anatoliygatt%2Fheart-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anatoliygatt","download_url":"https://codeload.github.com/anatoliygatt/heart-switch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719112,"owners_count":20336592,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessible","component","javascript","react","react-component","switch","toggle","toggle-switch","typescript"],"created_at":"2024-07-30T23:00:37.133Z","updated_at":"2025-03-15T10:31:39.380Z","avatar_url":"https://github.com/anatoliygatt.png","language":"TypeScript","funding_links":[],"categories":["UI Components","Uncategorized"],"sub_categories":["Form Components","Uncategorized"],"readme":"\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/p5oXNx0.gif\" alt=\"heart-switch Demo\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003ch1 align=\"center\"\u003eheart-switch\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eA heart-shaped toggle switch component for \u003ca href=\"https://reactjs.org\"\u003eReact\u003c/a\u003e. Inspired by Tore Bernhoft's \u003ca href=\"https://dribbble.com/shots/8306407-I-heart-toggle\"\u003eI heart toggle\u003c/a\u003e Dribbble shot and Aaron Iker's \u003ca href=\"https://codepen.io/aaroniker/full/PowbEKp\"\u003eCodepen\u003c/a\u003e.\u003c/h3\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/anatoliygatt/heart-switch/actions?query=workflow%3ACI\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/anatoliygatt/heart-switch/ci.yml?branch=master\u0026style=for-the-badge\u0026logo=github\u0026label=CI\u0026labelColor=000000\" alt=\"Github CI Workflow Status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@anatoliygatt/heart-switch\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@anatoliygatt/heart-switch.svg?style=for-the-badge\u0026logo=npm\u0026labelColor=000000\" alt=\"NPM Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/anatoliygatt/heart-switch/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/anatoliygatt/heart-switch.svg?style=for-the-badge\u0026logo=opensourceinitiative\u0026logoColor=ffffff\u0026labelColor=000000\" alt=\"License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## 📖 Table of Contents\n\n- [🚀 Getting Started](#-getting-started)\n  - [⚡️ Quick Start](#%EF%B8%8F-quick-start)\n  - [💻 Live Demo](#-live-demo)\n- [⚙️ Configuration](#%EF%B8%8F-configuration)\n- [♿️ Accessibility](#%EF%B8%8F-accessibility)\n- [👨🏼‍⚖️ License](#%EF%B8%8F-license)\n\n## 🚀 Getting Started\n\n### ⚡️ Quick Start\n\n```shell\nnpm install @anatoliygatt/heart-switch @emotion/react @emotion/styled\n```\n\n```jsx\nimport { useState } from 'react';\nimport { HeartSwitch } from '@anatoliygatt/heart-switch';\n\nfunction Example() {\n  const [checked, setChecked] = useState(false);\n  return (\n    \u003cHeartSwitch\n      size=\"lg\"\n      inactiveTrackFillColor=\"#cffafe\"\n      inactiveTrackStrokeColor=\"#22d3ee\"\n      activeTrackFillColor=\"#06b6d4\"\n      activeTrackStrokeColor=\"#0891b2\"\n      inactiveThumbColor=\"#ecfeff\"\n      activeThumbColor=\"#ecfeff\"\n      checked={checked}\n      onChange={(event) =\u003e {\n        setChecked(event.target.checked);\n      }}\n    /\u003e\n  );\n}\n```\n\n### 💻 Live Demo\n\n[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/demo-for-anatoliygatt-heart-switch-cds5p)\n\n## ⚙️ Configuration\n\n`HeartSwitch` supports the following props:\n\n| Prop                     | Type   | Default value           | Description                                                                                                                                 |\n| ------------------------ | ------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| size                     | string | `sm`                    | The size of the toggle switch. There are 3 available sizes:\u003cul\u003e\u003cli\u003e`sm` — 36x25px\u003c/li\u003e\u003cli\u003e`md` — 54x37.5px\u003c/li\u003e\u003cli\u003e`lg` — 72x50px\u003c/li\u003e\u003c/ul\u003e |\n| inactiveTrackFillColor   | string | `#ffffff`               | The fill color of the track when the toggle switch is in an inactive/off state.                                                             |\n| inactiveTrackStrokeColor | string | `#d1d1d1`               | The stroke color of the track when the toggle switch is in an inactive/off state.                                                           |\n| activeTrackFillColor     | string | `#ff708f`               | The fill color of the track when the toggle switch is in an active/on state.                                                                |\n| activeTrackStrokeColor   | string | `#ff4e74`               | The stroke color of the track when the toggle switch is in an active/on state.                                                              |\n| disabledTrackFillColor   | string | `#f2f2f2`               | The fill color of the track when the toggle switch is in a disabled state.                                                                  |\n| disabledTrackStrokeColor | string | `#d1d1d1`               | The stroke color of the track when the toggle switch is in a disabled state.                                                                |\n| invalidTrackFillColor    | string | `#ffffff`               | The fill color of the track when the toggle switch is in an invalid state.                                                                  |\n| invalidTrackStrokeColor  | string | `#d1d1d1`               | The stroke color of the track when the toggle switch is in an invalid state.                                                                |\n| inactiveThumbColor       | string | `#ffffff`               | The color of the thumb when the toggle switch is in an inactive/off state.                                                                  |\n| activeThumbColor         | string | `#ffffff`               | The color of the thumb when the toggle switch is in an active/on state.                                                                     |\n| disabledThumbColor       | string | `#ffffff`               | The color of the thumb when the toggle switch is in a disabled state.                                                                       |\n| invalidThumbColor        | string | `#ffffff`               | The color of the thumb when the toggle switch is in an invalid state.                                                                       |\n| thumbShadowColor         | string | `rgb(23 23 23 / 0.25)`  | The color of the thumb's shadow.                                                                                                            |\n| thumbFocusRingColor      | string | `rgb(59 130 246 / 0.5)` | The color of the thumb's focus ring.                                                                                                        |\n\nThe majority of the native `\u003cinput type=\"checkbox\" /\u003e` 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`.\n\n`HeartSwitch` also supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). If `ref` is passed, it will be forwarded to the underlying `\u003cinput type=\"checkbox\" /\u003e` element. It can be especially useful when we want to use `HeartSwitch` as an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html).\n\n## ♿️ Accessibility\n\nIn order to comply with the web accessibility standards, we must make use of an `aria-label` or `aria-labelledby` attribute, like so:\n\n```jsx\nfunction AccessibleExample() {\n  return \u003cHeartSwitch aria-label=\"Accept Terms and Conditions\" /\u003e;\n}\n```\n\nAlso, it is recommended to use an `aria-disabled` instead of a `disabled` attribute to make `HeartSwitch` immutable but focusable, like so:\n\n```jsx\nfunction AccessibleAndDisabledExample() {\n  return (\n    \u003cHeartSwitch\n      aria-label=\"Accept Terms and Conditions\"\n      aria-disabled=\"true\"\n    /\u003e\n  );\n}\n```\n\n## 👨🏼‍⚖️ License\n\n[MIT](https://github.com/anatoliygatt/heart-switch/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanatoliygatt%2Fheart-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanatoliygatt%2Fheart-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanatoliygatt%2Fheart-switch/lists"}