Getting Started

Teeny Store is a handy tool that helps you manage application state and side effects. You can easily use it in any modern JavaScript/TypeScript project.

Installation

You can install Teeny Store via a package manager, or load it directly in the browser using a CDN.

Package Manager

npm

npm install @vuezy/teeny-store

pnpm

pnpm add @vuezy/teeny-store

yarn

yarn add @vuezy/teeny-store

bun

bun add @vuezy/teeny-store

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuezy/teeny-store"></script>

When loaded via a CDN, the library is available globally as window.TeenyStore.

Usage

import { createStore } from "@vuezy/teeny-store";

const store = createStore(0);
store.useEffect(renderCount, (state) => [state]);

function renderCount(count) {
  const countEl = document.getElementById('count');
  if (countEl) {
    countEl.textContent = count;
  }
}

function decrement() {
  store.setState((state) => state - 1);
}

function increment() {
  store.setState((state) => state + 1);
}

document.getElementById('decrement-btn')?.addEventListener('click', decrement);
document.getElementById('increment-btn')?.addEventListener('click', increment);

The code basically sets up a store to keep track of the count state. Whenever the count state changes, the element displaying it is re-rendered.

If you want to persist the state, you can make use of the persistence plugin.

import { createPersistencePlugin, defineStore } from "@vuezy/teeny-store";

const store = defineStore(0).use(createPersistencePlugin({
  storage: 'localStorage',
  key: 'counter',
})).create();

For more examples, see the Examples page.
Check out the API Reference for more details.