Heart Toggle Switch for React | Heart Toggle Switch

A React component to create a heart-shaped toggle switch in the app.

How to use it:

1. Install and import.

# NPM
$ npm i @anatoliygatt/heart-switch @emotion/react @emotion/styledimport { useState } from 'react';
import { HeartSwitch } from '@anatoliygatt/heart-switch';

2. Create a basic heart toggle switch.

function Example() {
  const [checked, setChecked] = useState(false);
  return (
    <HeartSwitch
      checked={checked}
      onChange={(event) => {
        setChecked(event.target.checked);
      }}
    />
  );
}

3. Available props to customize the heart toggle switch.

size?: Size; // 'sm' | 'md' | 'lg'
inactiveTrackFillColor?: string;
inactiveTrackStrokeColor?: string;
activeTrackFillColor?: string;
activeTrackStrokeColor?: string;
disabledTrackFillColor?: string;
disabledTrackStrokeColor?: string;
invalidTrackFillColor?: string;
invalidTrackStrokeColor?: string;
inactiveThumbColor?: string;
activeThumbColor?: string;
disabledThumbColor?: string;
invalidThumbColor?: string;
thumbShadowColor?: string;
thumbFocusRingColor?: string;

Preview:

Download Details:

Author: anatoliygatt

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/anatoliygatt/heart-switch

License: MIT

#react #reactjs