
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
react-ripples-hover
Advanced tools
React ripple effect on hover and click component. Customizable, lightweight Google's Material UI style ripple effect
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 | ✅ |
FAQs
React ripple effect on hover and click component. Customizable, lightweight Google's Material UI style ripple effect
The npm package react-ripples-hover receives a total of 39 weekly downloads. As such, react-ripples-hover popularity was classified as not popular.
We found that react-ripples-hover demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.