react-heart

SVG based clickable heart button for react with animation options

Usage no npm install needed!

<script type="module">
  import reactHeart from 'https://cdn.skypack.dev/react-heart';
</script>

README

React-Heart

An SVG based, animated and customizable heart button

MIT license npm version npm size

Demo

Live demo and sandbox

Installation

React-Heart is available as an npm package.

// with npm
npm install react-heart

Usage

import React, { useState } from "react"
import Heart from "react-heart"

function App() {
    const [active, setActive] = useState(false)
    return (
        <div style={{ width: "2rem" }}>
            <Heart isActive={active} onClick={() => setActive(!active)}/>
        </div>
    );
}

Props

Name Type Required? Default Description
isActive bool required N/A Current heart status
onClick function required N/A Heart was clicked callback
animationTrigger 'none' | 'click' | 'hover' | 'both' optional 'click' Action that triggers animation
animationScale number optional 1.05 Scale of animation
animationDuration number optional 0.05 Length of animation
inactiveColor string optional 'black' Color of inactive heart
activeColor string optional 'red' Color of active heart
className string optional N/A Class name to apply custom CSS
style object optional N/A Style object

Example

import React, { useState } from "react"
import Heart from "react-heart"

function App() {
    const [active, setActive] = useState(false)
    return (
        <div style={{ width: "2rem" }}>
            <Heart isActive={active} onClick={() => setActive(!active)} animationTrigger = "both" inactiveColor = "rgba(255,125,125,.75)" activeColor = "#e019ae" style = {{marginTop:'1rem'}} animationDuration = {0.1}/>
        </div>
    );
}