https://github.com/sergeysova/effector-debounce

Debounce effector units
https://github.com/sergeysova/effector-debounce

debounce effector

Last synced: 3 months ago
JSON representation

Debounce effector units

• Host: GitHub
• URL: https://github.com/sergeysova/effector-debounce
• Owner: sergeysova
• Archived: true
• Created: 2020-02-17T17:38:55.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-06-18T12:56:01.000Z (over 4 years ago)
• Last Synced: 2024-02-11T15:55:00.851Z (9 months ago)
• Topics: debounce, effector
• Language: TypeScript
• Homepage: https://npmjs.com/effector-debounce
• Size: 139 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Effector Debounce

[![npm bundle size](https://img.shields.io/bundlephobia/min/effector-debounce)](https://bundlephobia.com/result?p=effector-debounce)

> **Deprecated**: Use [patronum](github.com/sergeysova/patronum) instead

https://codesandbox.io/s/effector-throttle-debounce-w32tk

## Installation

```bash

npm install --save effector effector-debounce

# or

yarn add effector effector-debounce

```

## Usage

Create event that should be debounced:

```ts

import { createEvent } from 'effector';

const someHappened = createEvent();

```

Create debounced event from it:

```ts

import { createDebounce } from 'effector-debounce';

const DEBOUNCE_TIMEOUT_IN_MS = 200;

const debounced = createDebounce(someHappened, DEBOUNCE_TIMEOUT_IN_MS);

```

To test that original event is correctly debounced you can add watcher:

```ts

debounced.watch((payload) => {

  console.info('someHappened now', payload);

});

someHappened(1);

someHappened(2);

someHappened(3);

someHappened(4);

// someHappened now 4

```

Also you can use `Effect` and `Store` as trigger. `createDebounce` always returns `Event`:

```ts

const event = createEvent();

const debouncedEvent: Event = createDebounce(event, 100);

const fx = createEffect();

const debouncedEffect: Event = createDebounce(fx, 100);

const $store = createStore(0);

const debouncedStore: Event = createDebounce($store, 100);

```

### Change name

```ts

const trigger = createEvent();

const debounced = createDebounce(trigger, 100);

// Now debounced var has `triggerDebounceTick` name

```

To change name:

```ts

const trigger = createEvent();

const debounced = createDebounce(trigger, 100, { name: 'Hello' });

// Now debounced var has `HelloDebounceTick` name

```