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 import React from 'react'; import Link from 'react-ripples-hover'; function TypesExample() { return ( <> <Link href="/" label="Ripples Hover"></Link> </> ); } 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: ' | 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 | ✅ |