1.0.7 • Published 5 years ago
react-heart-switch v1.0.7
Demo
Live demo and sandbox
Installation
React-Heart-Switch is available as an npm package.
// with npm
npm install react-heart-switchUsage
import React, { useState } from "react"
import HeartSwitch from "react-heart-switch"
function App() {
const [active, setActive] = useState(false)
return (
<div style={{ width: "2rem" }}>
<HeartSwitch 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' | optional | 'click' | Animation trigger |
| AnimationScale | number | optional | 1.05 | Scale of animation |
| inactiveColor | string | optional | 'black' | Color of inactive heart |
| inactiveSwitchColor | string | optional | inactiveColor | Color of inactive heart switch |
| 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 HeartSwitch from "react-heart-switch"
function App() {
const [active, setActive] = useState(false)
return (
<div style={{ width: "2rem" }}>
<HeartSwitch isActive={active} onClick={() => setActive(!active)} animationTrigger = "none" inactiveColor = "rgba(255,125,125,.75)" inactiveSwitchColor = "rgba(155,225,75,.75)" activeColor = "#e019ae" style = {{marginTop:'1rem'}}/>
</div>
);
}