1.0.6 • Published 3 years ago
react-heart v1.0.6
Demo
Installation
React-Heart is available as an npm package.
// with npm
npm install react-heartUsage
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>
);
}