{"id":13421924,"url":"https://github.com/arifszn/reactive-button","last_synced_at":"2025-04-07T07:05:45.105Z","repository":{"id":43163445,"uuid":"295759740","full_name":"arifszn/reactive-button","owner":"arifszn","description":"3D animated react button component with progress bar.","archived":false,"fork":false,"pushed_at":"2023-10-22T17:42:37.000Z","size":14041,"stargazers_count":134,"open_issues_count":6,"forks_count":21,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-31T06:05:14.617Z","etag":null,"topics":["button","component","progress-bar","react","react-animated-button","react-button","react-component"],"latest_commit_sha":null,"homepage":"https://arifszn.github.io/reactive-button","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/arifszn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2020-09-15T14:48:02.000Z","updated_at":"2025-03-30T19:57:51.000Z","dependencies_parsed_at":"2024-05-01T23:59:17.612Z","dependency_job_id":null,"html_url":"https://github.com/arifszn/reactive-button","commit_stats":{"total_commits":188,"total_committers":6,"mean_commits":"31.333333333333332","dds":0.276595744680851,"last_synced_commit":"af7df6d55a80df7c0f8ae25245050ecbcabed2f3"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifszn%2Freactive-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifszn%2Freactive-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifszn%2Freactive-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifszn%2Freactive-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arifszn","download_url":"https://codeload.github.com/arifszn/reactive-button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608150,"owners_count":20965952,"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":["button","component","progress-bar","react","react-animated-button","react-button","react-component"],"created_at":"2024-07-30T23:00:33.994Z","updated_at":"2025-04-07T07:05:45.087Z","avatar_url":"https://github.com/arifszn.png","language":"JavaScript","readme":"\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/45073703/183357205-60175f37-abcb-4027-bdfa-8762322f342b.png\" width=\"35%\"\u003e\n\n  \u003ch4 align=\"center\"\u003e3D animated react button component with progress bar.\u003c/h4\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/reactive-button\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/reactive-button\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/reactive-button\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dt/reactive-button\"/\u003e\n    \u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/min/reactive-button\"/\u003e\n    \u003cimg src=\"https://arifszn.github.io/reactive-button/img/dependencies.svg\"/\u003e\n    \u003ca href=\"https://codeclimate.com/github/arifszn/reactive-button/maintainability\"\u003e\n      \u003cimg src=\"https://api.codeclimate.com/v1/badges/c60f42d7d0b61bd33e98/maintainability\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/arifszn/reactive-button/issues\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/issues/arifszn/reactive-button\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/arifszn/reactive-button/stargazers\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/stars/arifszn/reactive-button\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/arifszn/reactive-button/commits/main\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/last-commit/arifszn/reactive-button/main\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/arifszn/reactive-button/blob/main/CONTRIBUTING.md\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/arifszn/reactive-button/blob/main/LICENSE\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/license/arifszn/reactive-button\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.buymeacoffee.com/arifszn\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/sponsor-buy%20me%20a%20coffee-yellow?logo=buymeacoffee\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://twitter.com/intent/tweet?text=3D%20animated%20react%20button%20component%20with%20progress%20bar.\u0026url=https://github.com/arifszn/reactive-button\u0026hashtags=javascript,reactjs,opensource,js,webdev,developers\"\u003e\n      \u003cimg src=\"https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Fgithub.com%2Farifszn%2Freactive-button\"/\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://arifszn.github.io/reactive-button\"\u003eDocumentation\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/arifszn/reactive-button/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/arifszn/reactive-button/discussions\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://arifszn.github.io/reactive-button\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://arifszn.github.io/reactive-button/img/preview.gif\" alt=\"Reactive Button Preview\" title=\"Reactive Button Preview\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**Reactive Button** is a 3D animated react component to replace the traditional boring buttons. Change your button style without adding any UI framework. Comes with progress bar and the goal is to let the users visualize what is happening after a button click.\n\n- 3D\n- Animated\n- Supports icons\n- Zero dependency\n- Progress indicator\n- Notification message\n- Supports TypeScript\n- Super easy to setup\n- Extremely lightweight\n- Super easy to customize\n- And much more !\n\n## Resources\n\n- [Documentation](https://arifszn.github.io/reactive-button)\n- [Playground](https://arifszn.github.io/reactive-button/docs/playground)\n- [StackBlitz](https://stackblitz.com/edit/reactive-button)\n\n## Installation\n\nInstall via \u003ca href=\"https://www.npmjs.com/package/reactive-button\"\u003eNPM\u003c/a\u003e.\n\n```sh\nnpm install reactive-button\n```\n\nOr via \u003ca href=\"https://yarnpkg.com/package/reactive-button\"\u003eYarn\u003c/a\u003e.\n\n```sh\nyarn add reactive-button\n```\n\n## Usage\n\nThe targets of the below example:\n\n- Show a button showing the text '_Submit_'.\n- After clicking the button, change the button text to '_Loading_' and send an HTTP request.\n- Upon successful request, change the button text to '_Done_' as success notification.\n\n```jsx\nimport { useState } from 'react';\nimport ReactiveButton from 'reactive-button';\n\nfunction App() {\n  const [state, setState] = useState('idle');\n\n  const onClickHandler = () =\u003e {\n    setState('loading');\n\n    // send an HTTP request\n    setTimeout(() =\u003e {\n      setState('success');\n    }, 2000);\n  };\n\n  return (\n    \u003cReactiveButton\n      buttonState={state}\n      idleText=\"Submit\"\n      loadingText=\"Loading\"\n      successText=\"Done\"\n      onClick={onClickHandler}\n    /\u003e\n  );\n}\n\nexport default App;\n```\n\n### Other Usage\n\nReactive Button has all the functionalities of a normal button.\n\n#### Color\n\nIt comes with 10 default color options.\n\n```jsx\nreturn (\n  \u003c\u003e\n    \u003cReactiveButton color=\"primary\" /\u003e\n    \u003cReactiveButton color=\"secondary\" /\u003e\n    \u003cReactiveButton color=\"teal\" /\u003e\n    \u003cReactiveButton color=\"green\" /\u003e\n    \u003cReactiveButton color=\"red\" /\u003e\n    \u003cReactiveButton color=\"violet\" /\u003e\n    \u003cReactiveButton color=\"blue\" /\u003e\n    \u003cReactiveButton color=\"yellow\" /\u003e\n    \u003cReactiveButton color=\"dark\" /\u003e\n    \u003cReactiveButton color=\"light\" /\u003e\n  \u003c/\u003e\n);\n```\n\n#### Size\n\nThere are 4 sizes available.\n\n```jsx\nreturn (\n  \u003c\u003e\n    \u003cReactiveButton size=\"tiny\" /\u003e\n    \u003cReactiveButton size=\"small\" /\u003e\n    \u003cReactiveButton size=\"medium\" /\u003e\n    \u003cReactiveButton size=\"large\" /\u003e\n  \u003c/\u003e\n);\n```\n\n#### Style\n\nMake the buttons more beautiful with these customization options.\n\n```jsx\nreturn (\n  \u003c\u003e\n    \u003cReactiveButton outline /\u003e\n    \u003cReactiveButton rounded /\u003e\n    \u003cReactiveButton shadow /\u003e\n  \u003c/\u003e\n);\n```\n\n#### Existing State\n\nIn your project, There might be existing state for loading indicator which accepts boolean value only. If you don't want to define new state for Reactive Button, then utilize the existing state.\n\n```jsx\nconst [loading, setLoading] = useState(false);\n\nreturn (\n  \u003cReactiveButton\n    buttonState={loading ? 'loading' : 'idle'}\n    idleText={'Button'}\n    loadingText={'Loading'}\n  /\u003e\n);\n```\n\n#### Without State\n\n`state` is not mandatory.\n\n```jsx\nreturn \u003cReactiveButton onClick={onClickHandler} /\u003e;\n```\n\n#### Using Icons\n\nYou can use your own icons. Don't forget to wrap them with a parent element.\n\n```jsx\nreturn (\n  \u003cReactiveButton\n    idleText={\n      \u003cspan\u003e\n        \u003cfaReply /\u003e Send\n      \u003c/span\u003e\n    }\n  /\u003e\n);\n```\n\n#### Form Submit\n\nIf you need to submit form by button clicking, set the \u003ccode\u003etype\u003c/code\u003e prop as '\u003cstrong\u003esubmit\u003c/strong\u003e'.\n\n```jsx\nreturn (\n  \u003cform\u003e\n    \u003cinput type=\"text\" name=\"username\" /\u003e\n    \u003cinput type=\"password\" name=\"password\" /\u003e\n    \u003cReactiveButton type={'submit'} idleText=\"Submit\" /\u003e\n  \u003c/form\u003e\n);\n```\n\n#### Anchor Tag\n\nTo use Reactive button as anchor tag, simply wrap it with an anchor tag.\n\n```jsx\nreturn (\n  \u003ca href=\"https://github.com/\" target=\"_blank\"\u003e\n    \u003cReactiveButton idleText=\"Visit Github\" /\u003e\n  \u003c/a\u003e\n);\n```\n\n## Available Props\n\n|      Props      |          Type           |                                                            Description                                                            |   Default    |\n| :-------------: | :---------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :----------: |\n|   buttonState   |        `string`         |                                        `'idle'` \\| `'loading'` \\| `'success'` \\| `'error'`                                        |   `'idle'`   |\n|     onClick     |       `function`        |                                              Callback function when clicking button                                               |  `() =\u003e {}`  |\n|      color      |        `string`         | `'primary'` \\| `'secondary'` \\| `'dark'` \\| `'light'` \\| `'green'` \\| `'red'` \\| `'yellow'` \\| `'teal'` \\| `'violet'` \\| `'blue'` | `'primary'`  |\n|    idleText     | `string` \\| `ReactNode` |                                                       Button text when idle                                                       | `'Click Me'` |\n|   loadingText   | `string` \\| `ReactNode` |                                                     Button text when loading                                                      | `'Loading'`  |\n|   successText   | `string` \\| `ReactNode` |                                                Button text when loading successful                                                | `'Success'`  |\n|    errorText    | `string` \\| `ReactNode` |                                                  Button text when loading failed                                                  |  `'Error'`   |\n|      type       |        `string`         |                                               `'button'` \\| `'submit'` \\| `'reset'`                                               |  `'button'`  |\n|    className    |        `string`         |                                                         Button classnames                                                         |     `''`     |\n|      style      |  `React.CSSProperties`  |                                                           Custom style                                                            |     `{}`     |\n|     outline     |        `boolean`        |                                                       Enable outline effect                                                       |   `false`    |\n|     shadow      |        `boolean`        |                                                       Enable shadow effect                                                        |   `false`    |\n|     rounded     |        `boolean`        |                                                       Enable rounded button                                                       |   `false`    |\n|      size       |        `string`         |                                         `'tiny'` \\| `'small'` \\| `'normal'` \\| `'large'`                                          |  `'normal'`  |\n|      block      |        `boolean`        |                                                           Block Button                                                            |   `false`    |\n| messageDuration |        `number`         |                                           Success/Error message duration in millisecond                                           |    `2000`    |\n|    disabled     |        `boolean`        |                                                          Disable button                                                           |   `false`    |\n|    buttonRef    |  `React.Ref` \\| `null`  |                                                         Button reference                                                          |    `null`    |\n|      width      |   `string` \\| `null`    |                                                       Override button width                                                       |    `null`    |\n|     height      |   `string` \\| `null`    |                                                      Override button height                                                       |    `null`    |\n|    animation    |        `boolean`        |                                                 Button hover and click animation                                                  |    `true`    |\n\n## Support\n\n\u003cp\u003eYou can show your support by starring this project.\u003c/p\u003e\n\u003ca href=\"https://github.com/arifszn/reactive-button/stargazers\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/stars/arifszn/reactive-button?style=social\" alt=\"Github Star\"\u003e\n\u003c/a\u003e\n\n## Contribute\n\nTo contribute, see the [contributing guide](https://github.com/arifszn/reactive-button/blob/main/CONTRIBUTING.md).\n\n## License\n\n[MIT License](https://github.com/arifszn/reactive-button/blob/main/LICENSE)\n","funding_links":["https://www.buymeacoffee.com/arifszn"],"categories":["UI Components","JavaScript","CSS"],"sub_categories":["Buttons"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifszn%2Freactive-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farifszn%2Freactive-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifszn%2Freactive-button/lists"}