Svelte ripple action

Usage

Install the package from npm or any node package manager of your choice

npm i -D svelte-ripple-action

Import the CSS styles for the ripple effect.

import "svelte-ripple-action/ripple.css";

Import the directive from the package 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>

DONE! 🥳 you have a ripple effect on your element.

Click me

Options

You can pass options to the ripple action to customize the ripple effect.

<script>
  import { ripple } from "svelte-ripple-action";
</script>

<button use:ripple={options}>Click me</button>

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.

Click me

<button use:ripple={{center:true}}>Click me</button>

color?: string

The color of the ripple effect. You can pass any valid CSS color value to the color option.

Red ripple

<button
  use:ripple={{
  	color: "rgba(255, 0, 0, 0.2)",
  }}
  style="background-color: white;color:red;border: 1px solid red;"
>
  Red ripple
</button>

duration?: number

Duration of the ripple effect in seconds. You can pass any valid number to the duration option.

2 seconds 0.2 seconds

<button use:ripple={{duration:2}}>2 seconds</button> 
<button use:ripple={{duration:0.2}}>0.2 seconds</button>

maxRadius?: number

Maximum radius of the ripple effect. You can pass any valid number maxRadius option.

200px

<button use:ripple={{maxRadius:200}} style="width: 400px; height: 200px;">200px</button>

Some examples

Needs to be wrapped in a div for void elements like img, input, etc.

<div use:ripple class="box imgripple">Image ripple</div>
<div use:ripple class="box gradient">Gradient ripple</div>

<br />

<p>Needs to be wrapped in a div for void elements like img, input, etc.</p>
<div use:ripple class="imgbox">
	<img
		src="https://media.tenor.com/VFFJ8Ei3C2IAAAAM/rickroll-rick.gif"
		alt="Man dancing"
	/>
</div>

<div
	use:ripple={{
		color: "rgba(0,0,0,0.5)",
	}}
>
	<input type="text" placeholder="Type something" style="width: 100%;" />
</div>

<style>
.box {
  height: 200px;
  width: 200px;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  border-radius: 5px;
  margin-top: 20px;
  margin-right: 20px;
  display: inline-flex;
}

.imgbox {
  height: 200px;
  width: 200px;
  border-radius: 5px;
  margin-top: 20px;
  margin-right: 20px;
  display: inline-flex;
  & img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  }
}

.imgripple {
  & .ripple {
  	background: url(https://media.tenor.com/VFFJ8Ei3C2IAAAAM/rickroll-rick.gif);
  	background-size: 80%;
  	background-position: center;
  	background-repeat: no-repeat;
  	z-index: -1;
  }
}

.gradient {
  & .ripple {
  	background: linear-gradient(45deg, #f3ed783d, #af4261);
  }
}
</style>