sparkle-ripple demo

How To Use

Getting Started

Install

Bun

bun install sparkle-ripple

Others

npm

npm i sparkle-ripple

pnpm

pnpm add sparkle-ripple

Yarn

yarn add sparkle-ripple

Use

Import <RippleContainer> component(by default, it’s rendered as <div />) and set props.

Example

import { RippleContainer } from 'sparkle-ripple'; //import it
import 'sparkle-ripple/css' // import css

import styles from './some_css_file.module.css';

const YourComponent = () => {
  return (
    <RippleContainer
      as = 'div'
      isMaterial3 = {true}
      beforeRippleFn = {(event) =>{}}
      className = {styles.rippleContainer}
      rippleColor = "hsla(29,81%,84%,0.15)"
      sparklesColorRGB = "255 255 255"
      opacity_level1 = "0.4"
      opacity_level2 = "0.1"
      sparklesMaxCount = 2048
    >
      <div className={styles.children} />
    </RippleContainer>
  );
};

export default YourComponent;

Property	optional	explanation	default	type
`as`	yes	What element is RippleContainer rendered as.	`"div"`	`ElementType`
`isMaterial3`	yes	Whether to use ripple of Material 3.	`true`	`boolean`
`beforeRippleFn`	yes	A function to be executed when a click occurs and just before the ripple is displayed (used for example to display a button shadow).	`()=>{}`	`(event: React.MouseEvent \| React.TouchEvent) => void`
`className`	yes	Since RippleContainer is rendered as the element which is selected by `as` property, this is the ClassName of that element.	`""`	`string`
`children`	yes	Child Elements of RippleContainer.	`undefined`	`ReactNode`
`rippleColor`	yes	Ripple Effect Colors. If transparency is not specified, the overlap will not be visible when multiple clicks are made.	`"#ffffff35"`	`string`
`sparklesColorRGB`	yes	Specify sparkle color as space-separated RGB. Transparency cannot be specified.	`"255 255 255"`	`string`
`opacity_level1`	yes	Transparency just before the sparkle disappears. *The transparency when initially displayed is calculated by the current progress of the Ripple Effect.	`"0.2"`	`string`
`opacity_level2`	yes	Transparency just before Sparkles disappear.Set after `opacity_level1`.	`"0.1"`	`string`
`sparklesMaxCount`	yes	Total amount of dots representing sparkle.	`2048`	`number`
Other Properties	yes	You can set other properties to add to the rendered element. e.g., `href` attribute of the RippleContainer whose rendered as `<a></a>` element.	-	-

FAQ

The Ripple Effect looks broken. The ripple’s width and height seem to affect the layout of the child elements inside RippleContainer, as if the ripple doesn’t have position: absolute. What’s going on?

This issue occurs when the CSS required to render the ripple effect provided by sparkle-ripple is not loaded. You need to explicitly import the CSS from your tsx/jsx file.
Alternatively, if you are using plugins such as postcss-import, you may also be able to import it from a CSS file.
Example:

import 'sparkle-ripple/css';

@import 'sparkle-ripple/css';

You can also load the CSS globally to avoid having to import it each time.
If you are using this library without a bundler, such as via a CDN, you can load the CSS using the @import url() syntax in your CSS.

When I wrap a RippleContainer with the a element, a blue box appears on tap in the mobile version of Chrome and the Ripple Effect is not visible. Is there any way to turn it off?

You can manipulate this effect using the -webkit-tap-highlight-color property. You can turn it off by specifying transparent.

Welcome to sparkle-ripple documentation & demo

Getting Started

Install

Bun

Others

Use

Example

FAQ