{"id":20902608,"url":"https://github.com/mayurjadhav2002/like-button-celebration","last_synced_at":"2025-07-01T07:07:26.166Z","repository":{"id":199138562,"uuid":"701768238","full_name":"mayurjadhav2002/like-button-celebration","owner":"mayurjadhav2002","description":"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.","archived":false,"fork":false,"pushed_at":"2024-02-03T14:10:30.000Z","size":1474,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-17T04:35:50.110Z","etag":null,"topics":["animation-css","button","javascript-library","like","npm","npm-package","twitter-like"],"latest_commit_sha":null,"homepage":"https://mayurjadhav2002.github.io/like-button-celebration/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mayurjadhav2002.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-10-07T13:55:33.000Z","updated_at":"2024-01-06T15:47:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"b3930eaa-7ae8-4918-b449-00de26bf0b11","html_url":"https://github.com/mayurjadhav2002/like-button-celebration","commit_stats":null,"previous_names":["mayurjadhav2002/like-button-celebration"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mayurjadhav2002/like-button-celebration","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayurjadhav2002%2Flike-button-celebration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayurjadhav2002%2Flike-button-celebration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayurjadhav2002%2Flike-button-celebration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayurjadhav2002%2Flike-button-celebration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mayurjadhav2002","download_url":"https://codeload.github.com/mayurjadhav2002/like-button-celebration/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayurjadhav2002%2Flike-button-celebration/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262376256,"owners_count":23301346,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation-css","button","javascript-library","like","npm","npm-package","twitter-like"],"created_at":"2024-11-18T12:07:36.869Z","updated_at":"2025-07-01T07:07:26.130Z","avatar_url":"https://github.com/mayurjadhav2002.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# like-button-celebration\n\n\u003e 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.\n\n[![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)\n\n## Install\n\n```bash\nnpm install --save like-button-celebration party-js\n```\n\n## Usage\n\n## Heart Like button\n![heart-Like.gif](https://i.postimg.cc/q76CK1jr/heart-Like.gif)\n```jsx\nimport React, {useState} from 'react'\nimport { HeartLike } from 'like-button-celebration'\n\nconst App = () =\u003e {\n    const [liked, SetLiked] = useState(user.liked)\n  return (\n    \u003c\u003e\n        \u003cHeartLike \n        //set the State of the Button. ie. Liked or Not\n        Active={liked}  // Default true\n        /\u003e\n    \u003c/\u003e\n    )\n}\n\nexport default App\n\n```\nThe `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:\n\n- **`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.\n\n- **`IconWidth`** (string, optional, default: `'24'`): Specifies the width of the heart icon.\n\n- **`IconHeight`** (string, optional, default: `'24'`): Specifies the height of the heart icon.\n\n- **`Image`** (string, optional): URL of an image to use as the Animation Particles. When provided, it will replace the default Square and Circle particles.\n\n- **`Speed`** (object, optional): An object with `Min` and `Max` properties to control the animation speed. For example:\n\n  ```jsx\n  Speed={{\n    Min: 100, // Minimum animation speed in milliseconds\n    Max: 400, // Maximum animation speed in milliseconds\n  }}\n  ```\n- **`Spread`** (number, optional, default: 50): Controls the spread of confetti particles when the button is clicked.\n\n- **`Count`**  (object, optional): An object with Min and Max properties to control the number of confetti particles. For example:\n\n  ```jsx\n  Count={{\n  Min: 20, // Minimum number of confetti particles\n  Max: 50, // Maximum number of confetti particles\n  }}\n  ```\n\n## example\n```jsx\n     \u003cHeartLike\n        Active={true}\n        IconWidth=\"32\"\n        IconHeight=\"32\"\n        Image=\"https://example.com/custom-heart-icon.png\"\n        Speed={{\n          Min: 200,\n          Max: 600,\n        }}\n        Spread={70}\n        Count={{\n          Min: 30,\n          Max: 60,\n        }}\n        Fill=\"blue\"\n      /\u003e\n```\n\n\n## Thumbs Up Like\nProps same as Above Heart Like Button.\n![likebutton.gif](https://i.postimg.cc/kgv7pKGS/likebutton.gif)\n\n\n## Example\n```jsx\nimport React, {useState} from 'react'\nimport { ThumbLike } from 'like-button-celebration'\n\nconst App = () =\u003e {\n    const [liked, SetLiked] = useState(user.liked)\n    return \n    (\n    \u003cdiv\u003e\n        \u003cThumbLike\n                Active={true} \n                IconWidth=\"32\" \n                IconHeight=\"32\"\n                Image=\"https://example.com/custom-thumb-icon.png\" \n                Speed={{\n                Min: 200, // Minimum animation speed in milliseconds (optional, default: 100)\n                Max: 600, // Maximum animation speed in milliseconds (optional, default: 400)\n                }}\n                Spread={70} // Control the spread of confetti particles (optional, default: 50)\n                Count={{\n                Min: 30, // Minimum number of confetti particles (optional, default: 20)\n                Max: 60, // Maximum number of confetti particles (optional, default: 50)\n                }}\n                Fill=\"blue\" \n            /\u003e\n    \u003c/div\u003e\n    )\n}\n\nexport default App\n```\n\n\n\n## Custom Button with Celebration Animation\nRemember, The `BeforeClick` and `AfterClick` props are required, and they determine the content to display before and after clicking the button.\n## Example\n```jsx\nimport React from 'react';\nimport { CustomButton } from 'like-button-celebration'\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cCustomButton\n        // Required\n        BeforeClick={\u003cdiv\u003eClick Me!\u003c/div\u003e}\n        AfterClick={\u003cdiv\u003eClicked!\u003c/div\u003e}\n\n        // Optional\n        Image=\"https://example.com/custom-icon.png\"\n        Speed={{\n          Min: 200,\n          Max: 600,\n        }}\n        Spread={70}\n        Count={{\n          Min: 30,\n          Max: 60,\n        }}\n        \n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n\n```\n---------------\n\n\n## License\n\nMIT © [mayurjadhav2002](https://github.com/mayurjadhav2002)\n\n\n\n## Feedback\n\nIf you have any feedback, please reach out to us at mayurshrikantjadhav@gmail.com\n\n\n## Contributing\n\nContributions are always welcome!\n\nSee `contributing.md` for ways to get started.\n\nPlease adhere to this project's `code of conduct`.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayurjadhav2002%2Flike-button-celebration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmayurjadhav2002%2Flike-button-celebration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayurjadhav2002%2Flike-button-celebration/lists"}