https://github.com/yifaneye/react-responsive-button

React component with ripple effect when clicked or tapped 👉 npm i react-responsive-button
https://github.com/yifaneye/react-responsive-button

button responsive ripple ripple-animation ripple-effect

Last synced: about 2 months ago
JSON representation

React component with ripple effect when clicked or tapped 👉 npm i react-responsive-button

• Host: GitHub
• URL: https://github.com/yifaneye/react-responsive-button
• Owner: yifaneye
• Created: 2020-12-20T12:46:21.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-04-13T14:05:44.000Z (over 3 years ago)
• Last Synced: 2024-10-11T20:20:31.966Z (2 months ago)
• Topics: button, responsive, ripple, ripple-animation, ripple-effect
• Language: JavaScript
• Homepage: https://yifanai.com/rrb
• Size: 405 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-responsive-button

Simple, lightweight, dependency-free React button component with ripple effect when clicked and tapped

[![NPM](https://img.shields.io/npm/v/react-responsive-button.svg)](https://www.npmjs.com/package/react-responsive-button)

## Demo

![react-responsive-button default, styled and customized buttons](https://yifanai.s3-ap-southeast-2.amazonaws.com/button/rrb.jpg) \

Try react-responsive-button 🚀 on [CodeSandbox](https://codesandbox.io/s/react-responsive-button-nvn2x?file=/src/App.js)

![react-responsive-button GIF demo with cursor indication](https://yifanai.s3-ap-southeast-2.amazonaws.com/button/buttons-with-cursor.gif) \

Note: the round black circle shown before the ripple is from GIPHY CAPTURE (the GIF app) to indicate a click.

![react-responsive-button GIF demo without cursor indication](https://yifanai.s3-ap-southeast-2.amazonaws.com/button/buttons-no-cursor.gif) \

Note: this is the component's behaviour when clicked, where the cursor is set to be hidden from GIPHY CAPTURE (the GIF app).

Try react-responsive-button 🚀 on [CodeSandbox](https://codesandbox.io/s/react-responsive-button-nvn2x?file=/src/App.js)

## Install

```bash

npm install --save react-responsive-button

```

OR

```bash

yarn add react-responsive-button

```

## Usage

```jsx

import React from 'react';

import { Button } from 'react-responsive-button';

import 'react-responsive-button/dist/index.css';

import reactLogo from './assets/favicon.ico';

const App = () => {

  return (

    


      Default Button

      Text Button

      Bordered Button

      Rectangular Button

      Pill-shaped Button

      Elliptical Button

      Default Button (disabled)

      Button-liked Anchor

      

        Button-liked Anchor

      

      

        Button-liked Anchor

      

      Red Button

      

        Button with shadow

      

      Button with border

      

        

          ❤️

        

      

      

        

      

    

  );

};


export default App;

```

Try react-responsive-button 🚀 on [CodeSandbox](https://codesandbox.io/s/react-responsive-button-nvn2x?file=/src/App.js)

## Props

To customize the default button with black background, white text, no border and rounded corners (with border-radius of 0.5rem), use the following props:

|Name             |Type                  |Default|Description|

|:----------------|:---------------------|:------|:----------|

|text             |Boolean               |false  |If true, the button will have white background and black text.|

|bordered         |Boolean               |false  |If true, the button will have white background, black text and 1px solid black border.|

|disabled         |Boolean               |false  |If true, the button will have faded background and faded text, and will not allowed to be clicked.|

|shape            |String                |null   |Shape of the button that is any of 'rectangle' or 'pill' or 'ellipse'.|

|href             |String                |null   |If specified, the button will be an anchor element, whilst still look like a button.|

|style            |Object                |null   |Inline style(s) to be placed on the button element.|

|children         |node or Array of nodes|null   |DOM node(s) inside the button.|

|(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'.|

## License

MIT © [Yifan Ai](https://github.com/yifaneye/react-responsive-button)