{"id":21030900,"url":"https://github.com/chewhx/react-bootstrap-button","last_synced_at":"2025-03-13T19:26:19.200Z","repository":{"id":57688459,"uuid":"472783870","full_name":"chewhx/react-bootstrap-button","owner":"chewhx","description":"Easily add a loading button for Bootstrap in React","archived":false,"fork":false,"pushed_at":"2022-09-01T01:49:00.000Z","size":2304,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-21T00:21:50.903Z","etag":null,"topics":["bootstrap","button","frontend","react","react-bootstrap","react-button","react-state"],"latest_commit_sha":null,"homepage":"https://chewhx.github.io/react-bootstrap-button","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chewhx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-22T13:38:21.000Z","updated_at":"2022-08-31T13:15:26.000Z","dependencies_parsed_at":"2022-08-25T15:40:43.404Z","dependency_job_id":null,"html_url":"https://github.com/chewhx/react-bootstrap-button","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chewhx%2Freact-bootstrap-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chewhx%2Freact-bootstrap-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chewhx%2Freact-bootstrap-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chewhx%2Freact-bootstrap-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chewhx","download_url":"https://codeload.github.com/chewhx/react-bootstrap-button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243467202,"owners_count":20295343,"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":["bootstrap","button","frontend","react","react-bootstrap","react-button","react-state"],"created_at":"2024-11-19T12:22:10.912Z","updated_at":"2025-03-13T19:26:19.160Z","avatar_url":"https://github.com/chewhx.png","language":"TypeScript","readme":"# React-Bootstrap-Button\n\nThis is a quick save for anyone looking to add a loading button for Bootstrap in React.\n\n**Note: You must install peer dependency [bootstrap](https://www.npmjs.com/package/bootstrap) and import the bootstrap stylesheet**\n\n## Links\n\n- [Demo](https://chewhx.github.io/react-bootstrap-button)\n- 📦 [NPM](https://www.npmjs.com/package/react-bootstrap-button)\n- 🗄️ [Repo](https://github.com/chewhx/react-bootstrap-button)\n- 🐙 [GitHub](https://github.com/chewhx)\n- 🖥️ [Website](https://www.chewhx.com)\n\n## Installation\n\n1. Install the package and bootstrap\n\n```bash\nnpm install react-bootstrap-button bootstrap\n```\n\nFor other installation methods of bootstrap styles, refer to guides from the [official bootstrap documentation](https://getbootstrap.com/docs/5.1/getting-started/introduction/).\n\n2. Import bootstrap stylesheet in your App.js:\n\n```javascript\nimport '../node_modules/bootstrap/dist/css/bootstrap.min.css';\n```\n\n## Usage\n\n```javascript\nimport { BootstrapButton } from 'react-bootstrap-button';\n\nconst Component = () =\u003e {\n\t// other code above...\n\n\tconst [clicked, setClicked] = useState(false);\n\tconst handleClick = () =\u003e setClicked(true);\n\n\treturn (\n\t\t\u003cBootstrapButton\n\t\t\tvariant=\"danger\"\n      // You may include all react-bootstrap button props\n\t\t\tclassName=\"m-4\".\n\t\t\tisLoading={clicked}\n\t\t\tloadingMessage=\"This button is loading...\"\n\t\t\tonClick={handleClick}\n\t\t\u003e\n\t\t\tClick me\n\t\t\u003c/BootstrapButton\u003e\n\t);\n\n\t// other code below...\n};\n```\n\n## API\n\nProperties for `\u003cBootstrapButton\u003e` includes those from React-Bootstrap Button and the following:\n\n```typescript\ntype BootstrapButton = {\n\tisLoading?: boolean;\n\tisDisabled?: boolean;\n\tspinnerPosition?: 'left' | 'right';\n\tspinnerProps?: SpinnerProps; // see React Spinner Props Api\n\tloadingMessage?: string;\n\tleftIcon?: ReactElement;\n};\n```\n\n- [React-Bootstrap Button Props](https://react-bootstrap.github.io/components/buttons/#button-props)\n- [React-Bootstrap Spinner Props](https://react-bootstrap.github.io/components/spinners/#spinner-props)\n\n## License\n\nMIT Licence\n\n## References\n\n- https://github.com/mantinedev/mantine/\n- https://github.com/react-bootstrap/react-bootstrap\n- https://javascript.plainenglish.io/the-practical-guide-to-start-react-testing-library-with-typescript-d386804a018\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchewhx%2Freact-bootstrap-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchewhx%2Freact-bootstrap-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchewhx%2Freact-bootstrap-button/lists"}