Skip to content

react-sandbox/heart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b08fcc7 · Mar 14, 2024

History

23 Commits
Aug 23, 2023
Mar 14, 2024
Aug 29, 2023
Aug 23, 2023
Aug 22, 2023
Mar 13, 2024
Aug 29, 2023
Mar 14, 2024
Aug 23, 2023
Aug 23, 2023
Aug 23, 2023
Aug 23, 2023
Aug 23, 2023

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