rwu823 / react-ripples Goto Github PK

View Code? Open in Web Editor NEW

201.0 3.0 19.0 4.74 MB

:swimmer: Material ripple effect. Ripples everything

Home Page: https://rwu823.github.io/react-ripples

License: MIT License

JavaScript 12.36% TypeScript 87.64%

react ripple button material

react-ripples's Introduction

react-ripples

_{Material ripple effect, ripples everywhere}

Attraction

✅ Zero dependencies
🚀 Tiny and blazing fast (Pure Component)
⚡ Typescript and definition file supported
🎨 Pure CSS animation
🌍 SSR supported

Installation

$ npm install --save react-ripples

$ yarn add react-ripples

Usage

import Ripples from 'react-ripples'

render() {
  <Ripples>
    <button>Ripple Button</button>
  </Ripples>
}

API

createRipples([defaultProps])

Extends default props without HOC

import { createRipples } from 'react-ripples'

const MyRipples = createRipples({
  color: 'purple',
  during: 2200,
})

Props

static propTypes = {
  during: PropTypes.number,
  color: PropTypes.string,
}

static defaultProps = {
  during: 600,
  color: 'rgba(0, 0, 0, .3)',
}

Property	Description
during	The css animate duration [ms]
color	The ripple's background color

react-ripples's People

Contributors

Stargazers

Watchers

Forkers

yuvalziegler zachrburke ilyjs niyasrahman semihkoc okslutsiv zhongjie-chen trendingtechnology marsandheart anton-kuptsov ruperttaryeenwind indexof i-am-omos arthur-bl-dev aboodman joseluis9595 jvince samuelkarani tapwatero

react-ripples's Issues

Demo isn't working

Ripple not applied to the buttons in demo.

changing the color via props.color is not working after the initial render.

changing the color via props.color is not working after the initial render.

Suggestion: Merge props.color into state.rippleStyle inside render method.

Warning: Unknown event handler property `onPointerEnterCapture`. It will be ignored.

<Ripples
id={"navBtn" + capitalizeFirstLetter(props.content.label)}
className='lateralNavBtn w-full'
onClick={(event) => {
props.setCurrentPage({
pageName: capitalizeFirstLetter(props.content.label), index: props.index,
});
}}
color="var(--darkGrey)"
during={800}
placeholder={undefined} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}
>

In this piece of code the IDE is forcing me to add placeholder, onPointerEnterCapture and onPointerLeaveCapture props but when i look at the chrome console i see the error i put in the title

Doesn't work if any parent is not position:static

Love the effect, but the library is almost unusable due to this issue. Every ancestor of the component must be position:static, otherwise the positioning of the ripple is off. I'm guessing the click coordinates are determined based on the current positioning context rather than being relative to the whole document - if there's no known fix I might make a PR

Not working on if parent has position:absolute

Ripple effect does not work if the container is positioned via position:absolute; (i.e. floating button).

The problem seems to be the positioning of the s ripple element, which coordinates should be relative to the parent, but are absolute of the window. I tried making it position:fixed; however it is now over the parent and therefore not bounded anymore

disableRipple

If true, the ripple effect will be disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with

Add Yarn 2 compatibility

The following error occurs with yarn 2

Cannot find module 'prop-types' or its corresponding type declarations.

Not working on Microsoft Edge

The ripple effect work fine on Firefox and Chrome but not on Edge.

trigger ripple use onMousedown instead of onClick

I have a link that jump to another address, user can't see any effect on link. Please change to onmousedown or anyother solution to solve this problem ?

Dist is requiring "React" instead of "react"

Hello,

Your build script transforms import 'react' intro require("React") (emphasis on the uppercase R) which causes problems when requiring this library as the app cannot find node_modules/React on case-sensitive filesystem (such as mine).

Do you think it would be possible to fix ? :)
Thanks in advance,

Giving error on docker build

Giving error

Property 'placeholder' is missing in type '{ children: Element; onClick: () => void; className: string; }' but required in type 'Pick<HTMLAttributes, "children" | "className" | "onError" | "color" | "slot" | "title" | "defaultChecked" | "defaultValue" | ... 243 more ... | "placeholder">'.

Please let me know if anyone finds a fix of this.

Ripple effect on button with borderRadius.

Buttons with a borderRadius (eg. 25px) have issues displaying the effect. Basically the button receives a background which also ripples.

It should be during instead of duration in demo

Great package, thank you!

Just to mention in the demo it says "just change color and duration". I think during would be better.

Thanks