React-Heart

An SVG based, animated and customizable heart button

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>
	);
}