dropways/react-ripples-hover

React Ripples Hover

React ripple effect on hover and click component. Customizable, lightweight Google's Material UI style ripple effect

Installation

npm install react-ripples-hover

or

yarn add react-ripples-hover

Usage

import React from 'react';
import Link from 'react-ripples-hover';

function TypesExample() {
  return (
    <>
      <Link href="/" label="Ripples Hover"></Link>
    </>
  );
}

export default TypesExample;

Component props

Props	Description	Type	Default	Optional
variant	One or more button variant combinations buttons may be one of a variety of visual variants such as: 'primary', 'secondary', ' success', 'danger', ' warning', 'info', ' light'	string	Null	✅
href	Providing a href will render an{" "} <a> element, styled as a link.	string	Null	✅
as	To render the button tag as="button" use the as prop.	string	<a>	✅
label	Add label for link text	string	Null	❌
rippleColor	Color of the ripple effect	string	rgba(0, 0, 0, .1)	✅
duration	Duration of the ripple effect, measured in seconds	number	.5	✅
rippleOnClick	If you do not want ripple on hover, simply pass rippleOnClick to get a ripple on click.	boolean	false	✅
icon	Icon of the link	ReactNode	Null	✅
iconPosition	Icon position before text is default start{" "} and after text position change position to{" "} end	string	start	✅
rounded	For link rounded corner	boolean	false	✅
flate	For link square corner	boolean	false	✅
block	For link full width	boolean	false	✅
disabled	You will get a disabled class in link or button for link or button disable.	boolean	false	✅
active	You will get a active class in link or button for link or button active.	boolean	false	✅
className	You will get a custom class on link or button.	string	Null	✅
children	The children of the component	ReactNode		✅