@react-sandbox/heart

Animated heart button.

Usage

Install

Install the @react-sandbox/heart package:

npm install @react-sandbox/heart

Import

Import the Heart component:

import React, { useState } from 'react'
import Heart from '@react-sandbox/heart'

function App() {
  const [active, setActive] = useState(false)

  return (
    <div>
      <Heart
        width={24}
        height={24}
        active={active}
        onClick={() => setActive(!active)}
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
width	number	required	Heart width
height	number	required	Heart height
active	boolean	required	Heart fill & animation
onClick	function	required	Click callback function
activeColor	string	'#ff0000'	Active color
inactiveColor	string	'#121212'	Inactive color
strokeWidth	number	30	Outline stroke width
disabled	boolean	false	Disable usage
ariaLabel	string	'Like'	Accessibility label
className	string	-	CSS classes
style	React.CSSProperties	-	CSS styles

Development

Local

pnpm install
pnpm dev

Tests

pnpm test

Example

Inside test/:

pnpm install
pnpm dev

License

MIT