Socket
Book a DemoInstallSign in
Socket

react-ripples-hover

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-ripples-hover

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

0.2.1
latest
Source
npmnpm
Version published
Weekly downloads
39
550%
Maintainers
1
Weekly downloads
 
Created
Source

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

PropsDescriptionType 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'

stringNull
href Providing a href will render an{" "} <a> element, styled as a link. stringNull
as To render the button tag as="button" use the as prop. string <a>
label Add label for link textstringNull
rippleColor Color of the ripple effectstringrgba(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. booleanfalse
icon Icon of the linkReactNodeNull
iconPosition Icon position before text is default start{" "} and after text position change position to{" "} end stringstart
rounded For link rounded cornerbooleanfalse
flate For link square cornerbooleanfalse
block For link full widthbooleanfalse
disabled You will get a disabled class in link or button for link or button disable. booleanfalse
active You will get a active class in link or button for link or button active. booleanfalse
className You will get a custom class on link or button.stringNull
children The children of the componentReactNode

Keywords

react

FAQs

Package last updated on 08 Feb 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.