React ripple effect on hover and click component. Customizable, lightweight Google's Material UI style ripple effect
npm install react-ripples-hover
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
| 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" usethe 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 | ✅ |