https://github.com/mayurjadhav2002/like-button-celebration

Like-button-celebration designed to add animated buttons for liking, unliking, upvoting, and custom interactions to your blogs, articles, and web content. With this library, you can easily integrate interactive buttons that celebrate user clicks, adding delightful animations to your web applications.
https://github.com/mayurjadhav2002/like-button-celebration

animation-css button javascript-library like npm npm-package twitter-like

Last synced: about 1 year ago
JSON representation

Like-button-celebration designed to add animated buttons for liking, unliking, upvoting, and custom interactions to your blogs, articles, and web content. With this library, you can easily integrate interactive buttons that celebrate user clicks, adding delightful animations to your web applications.

• Host: GitHub
• URL: https://github.com/mayurjadhav2002/like-button-celebration
• Owner: mayurjadhav2002
• License: mit
• Created: 2023-10-07T13:55:33.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-02-03T14:10:30.000Z (over 2 years ago)
• Last Synced: 2025-06-17T04:35:50.110Z (about 1 year ago)
• Topics: animation-css, button, javascript-library, like, npm, npm-package, twitter-like
• Language: JavaScript
• Homepage: https://mayurjadhav2002.github.io/like-button-celebration/
• Size: 1.41 MB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# like-button-celebration

> Like-button-celebration designed to add animated buttons for liking, unliking, upvoting, and custom interactions to your blogs, articles, and web content. With this library, you can easily integrate interactive buttons that celebrate user clicks, adding delightful animations to your web applications.

[![NPM](https://img.shields.io/npm/v/like-button-celebration.svg)](https://www.npmjs.com/package/like-button-celebration) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save like-button-celebration party-js

```

## Usage

## Heart Like button

![heart-Like.gif](https://i.postimg.cc/q76CK1jr/heart-Like.gif)

```jsx

import React, {useState} from 'react'

import { HeartLike } from 'like-button-celebration'

const App = () => {

    const [liked, SetLiked] = useState(user.liked)

  return (

    <>

        

    >

    )

}

export default App

```

The `HeartLike` component is designed for heart-shaped like buttons and provides various customization options. Here's a breakdown of the props it accepts, along with their usage and default values:

- **`Active`** (boolean, optional, default: `true`): Determines the initial state of the button. Set to `true` for a liked state and `false` for an unliked state.

- **`IconWidth`** (string, optional, default: `'24'`): Specifies the width of the heart icon.

- **`IconHeight`** (string, optional, default: `'24'`): Specifies the height of the heart icon.

- **`Image`** (string, optional): URL of an image to use as the Animation Particles. When provided, it will replace the default Square and Circle particles.

- **`Speed`** (object, optional): An object with `Min` and `Max` properties to control the animation speed. For example:

  ```jsx

  Speed={{

    Min: 100, // Minimum animation speed in milliseconds

    Max: 400, // Maximum animation speed in milliseconds

  }}

  ```

- **`Spread`** (number, optional, default: 50): Controls the spread of confetti particles when the button is clicked.

- **`Count`**  (object, optional): An object with Min and Max properties to control the number of confetti particles. For example:

  ```jsx

  Count={{

  Min: 20, // Minimum number of confetti particles

  Max: 50, // Maximum number of confetti particles

  }}

  ```

## example

```jsx

     

```

## Thumbs Up Like

Props same as Above Heart Like Button.

![likebutton.gif](https://i.postimg.cc/kgv7pKGS/likebutton.gif)

## Example

```jsx

import React, {useState} from 'react'

import { ThumbLike } from 'like-button-celebration'

const App = () => {

    const [liked, SetLiked] = useState(user.liked)

    return 

    (

    


        

    

    )

}


export default App

```

## Custom Button with Celebration Animation

Remember, The `BeforeClick` and `AfterClick` props are required, and they determine the content to display before and after clicking the button.

## Example

```jsx

import React from 'react';

import { CustomButton } from 'like-button-celebration'

function App() {

  return (

    


      Click Me!
}

        AfterClick={
Clicked!
}


        // Optional

        Image="https://example.com/custom-icon.png"

        Speed={{

          Min: 200,

          Max: 600,

        }}

        Spread={70}

        Count={{

          Min: 30,

          Max: 60,

        }}

        

      />

    

  );

}

export default App;

```

---------------

## License

MIT © [mayurjadhav2002](https://github.com/mayurjadhav2002)

## Feedback

If you have any feedback, please reach out to us at mayurshrikantjadhav@gmail.com

## Contributing

Contributions are always welcome!

See `contributing.md` for ways to get started.

Please adhere to this project's `code of conduct`.