Svelte Ripple Action
View the demo.
Svelte Ripple Action is a simple and customizable action for creating ripple effects on elements in a Svelte application.
Installation
Install the package from npm or your preferred package manager:
npm install svelte-ripple-action
Usage
- Import the CSS styles for the ripple effect:
import "svelte-ripple-action/ripple.css";
- Import the
ripple
action and use it on any element you want to have a ripple effect on:
<script>
import { ripple } from "svelte-ripple-action";
</script>
<button use:ripple>Click me</button>
That's it! You now have a ripple effect on your element.
Options
You can pass options to customize the ripple effect.
center?: boolean
By default, the ripple effect starts from the point where the user clicks on the element. If you want the ripple effect to start from the center of the element, you can pass the center
option.
<button use:ripple={{ center: true }}>Click me</button>
color?: string
You can customize the color of the ripple effect by passing a valid CSS color value to the color
option.
<button
use:ripple={{
color: "rgba(255, 0, 0, 0.2)",
}}
>Red ripple</button>
duration?: number
You can control the duration of the ripple effect in seconds by passing a number to the duration
option.
<button use:ripple={{ duration: 2 }}>2 seconds</button>
<button use:ripple={{ duration: 0.2 }}>0.2 seconds</button>
maxRadius?: number
You can control the maximum radius of the ripple effect in pixels by passing a number to the maxRadius
option.
<button use:ripple={{ maxRadius: 100 }}>100px</button>