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