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

jsx
import React from 'react';
import Link from 'react-ripples-hover';
function TypesExample() {
  return (
    <>
      
    
  );
}

export default TypesExample;``

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		✅

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


npm install react-ripples-hover

or


yarn add react-ripples-hover


Usage

jsx
import React from 'react';
import Link from 'react-ripples-hover';
function TypesExample() {
  return (
    <>
      
    
  );
}

export default TypesExample;``

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		✅