Add animated buttons for liking, unliking and custom interactions to React App
Tags: button
Published: 2023-10-22 17:54:08

---
title: Add animated buttons for liking, unliking and custom interactions to React App
published: true
date: 2023-10-16 00:21:00 UTC
tags: Button
canonical_url: https://reactjsexample.com/add-animated-buttons-for-liking-unliking-and-custom-interactions-to-react-app/
---

# like-button-celebration

> ![Add animated buttons for liking, unliking and custom interactions to React App](https://reactjsexample.com/content/images/2023/10/Code_2023-10_21-29-00.jpg)
> 
> 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.

## Install

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

## Usage

## Heart Like button

![Add animated buttons for liking, unliking and custom interactions to React App](https://camo.githubusercontent.com/4bf61a5cefa08ac48bf6e4c81700a27e54f29e477ecf55c19a4887a1d5365587/68747470733a2f2f692e706f7374696d672e63632f713736434b316a722f68656172742d4c696b652e676966)

```
import React, {useState} from 'react'
import { HeartLike } from 'like-button-celebration'

const App = () => {
    const [liked, SetLiked] = useState(user.liked)
  return (
    <>
        <HeartLike 
        //set the State of the Button. ie. Liked or Not
        Active={liked} // Default true
        />
    </>
    )
}

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:

- **`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:

## example

```
     <HeartLike
        Active={true}
        IconWidth="32"
        IconHeight="32"
        Image="https://example.com/custom-heart-icon.png"
        Speed={{
          Min: 200,
          Max: 600,
        }}
        Spread={70}
        Count={{
          Min: 30,
          Max: 60,
        }}
        Fill="blue"
      />
```

## Thumbs Up Like

Props same as Above Heart Like Button. ![Add animated buttons for liking, unliking and custom interactions to React App](https://camo.githubusercontent.com/fc50e144a2d140c155ad2792254eddc927d9ec48e8eee16f49068d79f1f2c754/68747470733a2f2f692e706f7374696d672e63632f6b677637704b47532f6c696b65627574746f6e2e676966)

## Example

```
import React, {useState} from 'react'
import { ThumbLike } from 'like-button-celebration'

const App = () => {
    const [liked, SetLiked] = useState(user.liked)
    return 
    (
    <div>
        <ThumbLike
                Active={true} 
                IconWidth="32" 
                IconHeight="32"
                Image="https://example.com/custom-thumb-icon.png" 
                Speed={{
                Min: 200, // Minimum animation speed in milliseconds (optional, default: 100)
                Max: 600, // Maximum animation speed in milliseconds (optional, default: 400)
                }}
                Spread={70} // Control the spread of confetti particles (optional, default: 50)
                Count={{
                Min: 30, // Minimum number of confetti particles (optional, default: 20)
                Max: 60, // Maximum number of confetti particles (optional, default: 50)
                }}
                Fill="blue" 
            />
    </div>
    )
}

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

```
import React from 'react';
import { CustomButton } from 'like-button-celebration'

function App() {
  return (
    <div>
      <CustomButton
        // Required
        BeforeClick={<div>Click Me!</div>}
        AfterClick={<div>Clicked!</div>}

        // Optional
        Image="https://example.com/custom-icon.png"
        Speed={{
          Min: 200,
          Max: 600,
        }}
        Spread={70}
        Count={{
          Min: 30,
          Max: 60,
        }}
        
      />
    </div>
  );
}

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](mailto: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`.

## GitHub

[View Github](https://github.com/mayurjadhav2002/like-button-celebration?ref=reactjsexample.com)