Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kipicenko/chaocore-ripple

The very easy, performance and flexible to use JavaScript/TypeScript library for creating a ripple effect.
https://github.com/kipicenko/chaocore-ripple

animation chaocore effect hooks javascript native-js programming react react-hooks react-ripple react-wave ripple ripple-animation ripple-effect tyepscript wave wave-animation wave-effect

Last synced: about 2 months ago
JSON representation

The very easy, performance and flexible to use JavaScript/TypeScript library for creating a ripple effect.

Host: GitHub
URL: https://github.com/kipicenko/chaocore-ripple
Owner: Kipicenko
License: mit
Created: 2024-03-09T13:43:52.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-03-27T15:39:10.000Z (9 months ago)
Last Synced: 2024-04-29T21:47:58.592Z (8 months ago)
Topics: animation, chaocore, effect, hooks, javascript, native-js, programming, react, react-hooks, react-ripple, react-wave, ripple, ripple-animation, ripple-effect, tyepscript, wave, wave-animation, wave-effect
Language: TypeScript
Homepage:
Size: 705 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# @chaocore/ripple

The very easy, performance and flexible to use JavaScript/TypeScript library for creating a ripple effect.

### Demonstration

![Demonstration library](https://raw.githubusercontent.com/Kipicenko/chaocore-ripple/assets/demonstration.gif)

### Installing

Using npm:

```bash
npm i @chaocore/ripple
```

Using yarn:

```bash
yarn add @chaocore/ripple
```

Using pnpm:

```bash
pnpm add @chaocore/ripple
```

Using CDN:

```html

```

```html

```

### Usage
- - -

**React**

```jsx
import { useRipple } from "@chaocore/ripple";

function MyComponent() {
const ripple = useRipple(options);

return Click Here
}
```

**Native js**

```js
const btn = document.querySelector(".btn");

btn.addEventListener("pointerdown", (event) => {
createRippleEffect(event, btn, options) // or window.createRippleEffect
})
```

### Options

| Name | Default | Type |
|----------------------|:----------------:|-----------|
| color | `"currentColor"` | `string` |
| easing | `"ease-out"` | `string` |
| duration | `400ms` | `number` |
| dissolveDuration | `300ms` | `number` |
| delay | `75ms` | `number` |
| initialOpacity | `0.2` | `number` |
| finalOpacity | `0.1` | `number` |
| considerDisabledAttr | `true` | `boolean` |
| turnOff | `false` | `boolean` |

### Description of options

| Name | Description |
|----------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| color | Defines the color of the ripple. |
| easing | Any valid CSS [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function). |
| duration | The duration of the ripple in milliseconds. |
| dissolveDuration | The dissolve duration of the ripple in milliseconds.
Starts after the end of the main duration. |
| delay | The animation delay in milliseconds during which the animation maybe canceled if the current pointer action is interrupted for some reason and pointer events are no longer generated.
[Read about the pointercancel event](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event) |
| initialOpacity | The opacity of the ripple at the beginning of the animation. |
| finalOpacity | The opacity of the ripple at the end of the animation. |
| considerDisabledAttr | Don't display a ripple effect if the element has the disabled attribute. |
| turnOff | Don't display a ripple effect. |