{"id":18737424,"url":"https://github.com/yifaneye/react-responsive-button","last_synced_at":"2025-11-17T15:30:15.466Z","repository":{"id":57343586,"uuid":"323069882","full_name":"yifaneye/react-responsive-button","owner":"yifaneye","description":"React component with ripple effect when clicked or tapped 👉 npm i react-responsive-button","archived":false,"fork":false,"pushed_at":"2021-04-13T14:05:44.000Z","size":415,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-28T19:02:36.145Z","etag":null,"topics":["button","responsive","ripple","ripple-animation","ripple-effect"],"latest_commit_sha":null,"homepage":"https://yifanai.com/rrb","language":"JavaScript","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/yifaneye.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":"2020-12-20T12:46:21.000Z","updated_at":"2022-01-14T22:27:03.000Z","dependencies_parsed_at":"2022-09-12T06:30:31.416Z","dependency_job_id":null,"html_url":"https://github.com/yifaneye/react-responsive-button","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yifaneye%2Freact-responsive-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yifaneye%2Freact-responsive-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yifaneye%2Freact-responsive-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yifaneye%2Freact-responsive-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yifaneye","download_url":"https://codeload.github.com/yifaneye/react-responsive-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239612002,"owners_count":19668276,"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","responsive","ripple","ripple-animation","ripple-effect"],"created_at":"2024-11-07T15:25:05.692Z","updated_at":"2025-11-17T15:30:15.377Z","avatar_url":"https://github.com/yifaneye.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-responsive-button\n\nSimple, lightweight, dependency-free React button component with ripple effect when clicked and tapped\n\n[![NPM](https://img.shields.io/npm/v/react-responsive-button.svg)](https://www.npmjs.com/package/react-responsive-button)\n\n## Demo\n\n![react-responsive-button default, styled and customized buttons](https://yifanai.s3-ap-southeast-2.amazonaws.com/button/rrb.jpg) \\\nTry react-responsive-button 🚀 on [CodeSandbox](https://codesandbox.io/s/react-responsive-button-nvn2x?file=/src/App.js)\n\n![react-responsive-button GIF demo with cursor indication](https://yifanai.s3-ap-southeast-2.amazonaws.com/button/buttons-with-cursor.gif) \\\nNote: the round black circle shown before the ripple is from GIPHY CAPTURE (the GIF app) to indicate a click.\n\n![react-responsive-button GIF demo without cursor indication](https://yifanai.s3-ap-southeast-2.amazonaws.com/button/buttons-no-cursor.gif) \\\nNote: this is the component's behaviour when clicked, where the cursor is set to be hidden from GIPHY CAPTURE (the GIF app).\n\nTry react-responsive-button 🚀 on [CodeSandbox](https://codesandbox.io/s/react-responsive-button-nvn2x?file=/src/App.js)\n\n## Install\n\n```bash\nnpm install --save react-responsive-button\n```\nOR\n```bash\nyarn add react-responsive-button\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\n\nimport { Button } from 'react-responsive-button';\nimport 'react-responsive-button/dist/index.css';\nimport reactLogo from './assets/favicon.ico';\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cButton\u003eDefault Button\u003c/Button\u003e\n      \u003cButton text\u003eText Button\u003c/Button\u003e\n      \u003cButton bordered\u003eBordered Button\u003c/Button\u003e\n      \u003cButton shape='rectangle'\u003eRectangular Button\u003c/Button\u003e\n      \u003cButton shape='pill'\u003ePill-shaped Button\u003c/Button\u003e\n      \u003cButton shape='ellipse'\u003eElliptical Button\u003c/Button\u003e\n      \u003cButton disabled\u003eDefault Button (disabled)\u003c/Button\u003e\n      \u003cButton href='#hi'\u003eButton-liked Anchor\u003c/Button\u003e\n      \u003cButton href='https://www.npmjs.com/package/react-responsive-button'\u003e\n        Button-liked Anchor\n      \u003c/Button\u003e\n      \u003cButton\n        href='https://www.npmjs.com/package/react-responsive-button'\n        target='_blank'\n      \u003e\n        Button-liked Anchor\n      \u003c/Button\u003e\n      \u003cButton style={{ background: 'red' }}\u003eRed Button\u003c/Button\u003e\n      \u003cButton style={{ boxShadow: '0 0 1rem 0 rgba(0, 0, 0, 0.5)' }}\u003e\n        Button with shadow\n      \u003c/Button\u003e\n      \u003cButton style={{ border: '5px solid red' }}\u003eButton with border\u003c/Button\u003e\n      \u003cButton\u003e\n        \u003cspan role='img' aria-label='Heart'\u003e\n          ❤️\n        \u003c/span\u003e\n      \u003c/Button\u003e\n      \u003cButton\u003e\n        \u003cimg src={reactLogo} alt='React' /\u003e\n      \u003c/Button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\nTry react-responsive-button 🚀 on [CodeSandbox](https://codesandbox.io/s/react-responsive-button-nvn2x?file=/src/App.js)\n\n## Props\n\nTo customize the default button with black background, white text, no border and rounded corners (with border-radius of 0.5rem), use the following props:\n\n|Name             |Type                  |Default|Description|\n|:----------------|:---------------------|:------|:----------|\n|text             |Boolean               |false  |If true, the button will have white background and black text.|\n|bordered         |Boolean               |false  |If true, the button will have white background, black text and 1px solid black border.|\n|disabled         |Boolean               |false  |If true, the button will have faded background and faded text, and will not allowed to be clicked.|\n|shape            |String                |null   |Shape of the button that is any of 'rectangle' or 'pill' or 'ellipse'.|\n|href             |String                |null   |If specified, the button will be an anchor element, whilst still look like a button.|\n|style            |Object                |null   |Inline style(s) to be placed on the button element.|\n|children         |node or Array of nodes|null   |DOM node(s) inside the button.|\n|(any other props)|Any                   |null   |Any number of additional attribute(s) to be placed on the button element, e.g. target='_blank', aria-label='Open Modal'.|\n\n## License\n\nMIT © [Yifan Ai](https://github.com/yifaneye/react-responsive-button)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyifaneye%2Freact-responsive-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyifaneye%2Freact-responsive-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyifaneye%2Freact-responsive-button/lists"}