1.1.0 • Published 2 months ago
@react-sandbox/heart v1.1.0
Usage
Install
Install the @react-sandbox/heart
package:
npm install @react-sandbox/heart
Import
Import the Heart
component:
import React, { useState } from 'react'
import Heart from '@react-sandbox/heart'
function App() {
const [active, setActive] = useState(false)
return (
<div>
<Heart
width={24}
height={24}
active={active}
onClick={() => setActive(!active)}
/>
</div>
)
}
Props
Prop | Type | Default | Description |
---|---|---|---|
width | number | required | Heart width |
height | number | required | Heart height |
active | boolean | required | Heart fill & animation |
onClick | function | required | Click callback function |
activeColor | string | '#ff0000' | Active color |
inactiveColor | string | '#121212' | Inactive color |
strokeWidth | number | 30 | Outline stroke width |
disabled | boolean | false | Disable usage |
ariaLabel | string | 'Like' | Accessibility label |
className | string | - | CSS classes |
style | React.CSSProperties | - | CSS styles |
Development
Local
pnpm install
pnpm dev
Tests
pnpm test
Example
Inside test/
:
pnpm install
pnpm dev
License
MIT