Skip to content

React component with ripple effect when clicked or tapped ๐Ÿ‘‰ npm i react-responsive-button

Notifications You must be signed in to change notification settings

yifaneye/react-responsive-button

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

47 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

react-responsive-button

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

NPM

Demo

react-responsive-button default, styled and customized buttons
Try react-responsive-button ๐Ÿš€ on CodeSandbox

react-responsive-button GIF demo with cursor indication
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
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

Install

npm install --save react-responsive-button

OR

yarn add react-responsive-button

Usage

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 (
    <div>
      <Button>Default Button</Button>
      <Button text>Text Button</Button>
      <Button bordered>Bordered Button</Button>
      <Button shape='rectangle'>Rectangular Button</Button>
      <Button shape='pill'>Pill-shaped Button</Button>
      <Button shape='ellipse'>Elliptical Button</Button>
      <Button disabled>Default Button (disabled)</Button>
      <Button href='#hi'>Button-liked Anchor</Button>
      <Button href='https://www.npmjs.com/package/react-responsive-button'>
        Button-liked Anchor
      </Button>
      <Button
        href='https://www.npmjs.com/package/react-responsive-button'
        target='_blank'
      >
        Button-liked Anchor
      </Button>
      <Button style={{ background: 'red' }}>Red Button</Button>
      <Button style={{ boxShadow: '0 0 1rem 0 rgba(0, 0, 0, 0.5)' }}>
        Button with shadow
      </Button>
      <Button style={{ border: '5px solid red' }}>Button with border</Button>
      <Button>
        <span role='img' aria-label='Heart'>
          โค๏ธ
        </span>
      </Button>
      <Button>
        <img src={reactLogo} alt='React' />
      </Button>
    </div>
  );
};

export default App;

Try react-responsive-button ๐Ÿš€ on CodeSandbox

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

About

React component with ripple effect when clicked or tapped ๐Ÿ‘‰ npm i react-responsive-button

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published