https://github.com/react-sandbox/heart
❤️ "Like" button
https://github.com/react-sandbox/heart
button component heart react react-heart typescript
Last synced: 4 months ago
JSON representation
❤️ "Like" button
- Host: GitHub
- URL: https://github.com/react-sandbox/heart
- Owner: react-sandbox
- License: mit
- Created: 2023-08-18T08:57:36.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T01:27:45.000Z (over 1 year ago)
- Last Synced: 2025-07-07T07:05:13.690Z (4 months ago)
- Topics: button, component, heart, react, react-heart, typescript
- Language: TypeScript
- Homepage:
- Size: 291 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@react-sandbox/heart
❤️ Animated heart button.
## Usage
### Install
Install the `@react-sandbox/heart` package:
```
npm install @react-sandbox/heart
```
### Import
Import the `Heart` component:
```tsx
import React, { useState } from 'react'
import Heart from '@react-sandbox/heart'
function App() {
const [active, setActive] = useState(false)
return (
setActive(!active)}
/>
)
}
```
### 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