https://github.com/posandu/svelte-ripple-action
Svelte Ripple Action
https://github.com/posandu/svelte-ripple-action
css javascript material-design svelte sveltekit typescript
Last synced: about 1 month ago
JSON representation
Svelte Ripple Action
- Host: GitHub
- URL: https://github.com/posandu/svelte-ripple-action
- Owner: Posandu
- License: mit
- Created: 2023-08-12T08:10:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-15T13:15:38.000Z (6 months ago)
- Last Synced: 2025-04-03T11:11:55.215Z (about 2 months ago)
- Topics: css, javascript, material-design, svelte, sveltekit, typescript
- Language: Svelte
- Homepage: https://ripple.posandu.com/
- Size: 219 KB
- Stars: 61
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Ripple Action
View the [demo](https://ripple.posandu.com/).
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:
```bash
npm install svelte-ripple-action
```
## Usage
1. Import the CSS styles for the ripple effect:
```javascript
import "svelte-ripple-action/ripple.css";
```
2. Import the `ripple` action and use it on any element you want to have a ripple effect on:
```svelte
import { ripple } from "svelte-ripple-action";
Click me
```
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.
```svelte
Click me
```
### `color?: string`
You can customize the color of the ripple effect by passing a valid CSS color value to the `color` option.
```svelte
Red ripple
```
### `duration?: number`
You can control the duration of the ripple effect in seconds by passing a number to the `duration` option.
```svelte
2 seconds
0.2 seconds
```
### `maxRadius?: number`
You can control the maximum radius of the ripple effect in pixels by passing a number to the `maxRadius` option.
```svelte
100px
```
## Credits
Created by [Posandu](https://posandu.com). You can find the source code on [GitHub](https://github.com/posandu/svelte-ripple-action).