README
React-Heart
Demo
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>
);
}