Config-based action debouncing made easy

Overview

Pinia logo Pinia Debounce

npm package build status

Debounce any action in your pinia 🍍 store!

This is also a very good example of how to create a pinia plugin and how to type it.

Installation

npm install @pinia/plugin-debounce

You also need to use a debounce function like lodash.debounce or ts-debounce

Usage

import { debounce } from 'ts-debounce'
import { PiniaDebounce } from '@pinia/plugin-debounce'

// Pass the plugin to your application's pinia plugin
pinia.use(PiniaDebounce(debounce))

You can then use a debounce option in your stores:

defineStore('id', {
  actions: {
    someSearch() {
      // ...
    },
  },
  debounce: {
    // debounce all `someSearch` calls by 300ms
    someSearch: 300,
  },
})

License

MIT

Comments
Releases(v0.1.0)
Owner
Eduardo San Martin Morote
Member of the @vuejs core team Speaker, trainer. From 🇪🇸, lives in 🇫🇷
Eduardo San Martin Morote
Native wrapper for Xbox Cloud Gaming (xbox.com/play) made with Electron

Xbox Cloud Gaming wrapper Simple native Electron wrapper for Xbox Cloud Gaming (xbox.com/play) Features Windows / Mac (intel/Apple Silicon) / Linux(?)

null 34 Dec 28, 2022
An easy-to-use linux app that lets you create Desktop Shortcuts hassle-free

DeskCut An easy to use app that lets you create Desktop Shortcuts (.desktop files) on Linux without requiring to mess with .desktop files! How to use

null 96 Dec 30, 2022
Semantic is a UI component framework based around useful principles from natural language.

Semantic UI Semantic is a UI framework designed for theming. Key Features 50+ UI elements 3000 + CSS variables 3 Levels of variable inheritance (simil

Semantic Org 50.3k Dec 31, 2022
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Jan 2, 2023
Grid based on CSS3 flexbox

Flexbox Grid flexboxgrid.com Grid based on the flex display property. Install npm npm i flexboxgrid --save bower bower install flexboxgrid cdn CDNJS <

kj 9.3k Jan 2, 2023
A new flexbox based CSS micro-framework.

Strawberry CSS What Strawberry is a new flexbox based CSS micro-framework. A set of common flexbox's utilities focused on making your life easier and

Andrea Simone Costa 74 Sep 26, 2022
A markdown based documentation system for style guides.

Hologram Hologram is a Ruby gem that parses comments in your CSS and helps you turn them into a beautiful style guide. There are two steps to building

Trulia, LLC. 2.2k Nov 12, 2022
Markdown-based styleguide generator

Styledown Write maintainable CSS styleguides efficiently using a Markdown. See example ▸ Installation $ npm install -g styledown $ styledown --help Ho

Styledown 674 Nov 21, 2022
Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects. inuitcss is a framework in its truest sense: it does not pro

inuitcss 1.8k Dec 30, 2022
Text-based user interface CSS library

TuiCss Text-based user interface CSS library -- Documentation -- About TuiCss is a library focused to create web applications using an interface based

Vinicius Reif Biavatti 1.2k Jan 2, 2023
Material Design Based One Page HTML Template

Material Design One Page HTML Template MD One page template is fully responsive and free to use. This HTML template is based on Materialize, a CSS Fra

Joash 587 Jan 2, 2023
A simple build tool for Figma plugins based on webpack

Figpack EXPERIMENTAL / WORK IN PROGRESS A simple build tool for Figma plugins based on webpack. It's optimized for plugins that could get complex, mea

Roman Nurik 21 Oct 9, 2022
Apply CSS based on your browser's text rendering engine

Type Rendering Mix Type Rendering Mix website Type Rendering Mix detects your browser’s text rasterizer and antialiasing method by parsing the user ag

Bram Stein 496 Dec 6, 2022
Set of react components based on styled-components

React to styled Links Documentation Contributing Ask question or give feedback Packages @react-to-styled/components – all components in one package @r

null 11 Jan 1, 2023
A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍

React Pluto Component Design System + UI Kit A package of small but beautiful React components from the planet Pluto. To install the latest version, r

Yash Sehgal 17 Aug 8, 2022
A modern, responsive CSS boilerplate library to kickstart any web-based project.

Peacock CSS Peacock is a modern, responsive CSS boilerplate library to kickstart any web-based project. It is simple, lightweight and it contains all

Binary Birds 8 Jan 23, 2022
A web interface to edit TP-Link Router Config export files (typically named config.bin).

TP-Link Router Config Editor A web interface to edit TP-Link Router Config export files (typically named config.bin). Visit the website. Tested on an

Jahed 10 Nov 17, 2022
Get any config from here. So easy. 🤞

@minko-fe/any-config Usage eslint install pnpm add eslint @minko-fe/eslint-config prettier -D .eslintrc.json { "extends": "@minko-fe" } prettier ins

null 7 Dec 15, 2022
Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and com

Web & Mobile | eCommerce | Full-Stack Developer 4 Nov 24, 2022