Skip to content

react-sandbox/heart

Repository files navigation

Build status Dependencies Build size Package downloads

Example

❤️ 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