yaasl v0.6.1

yaasl - yet another atomic store library

• yaasl - yet another atomic store library
  • Packages
  • Quickstart
  • Usage examples [ Vanilla typescript, React ]

This project is meant for personal use only. I won't stop you from using it, but I would rather recommend to use a similar and more mature solution like jotai.

See the docs directory for detailed documentation.

Packages

Quickstart

1. Install the package

$ npm i yaasl

2. Create an atom

import { atom } from "yaasl";

const myAtom = atom({ defaultValue: 0 });

3. Use the atom

// Read
const currentValue = myAtom.get(atom);
// Write
myAtom.set(nextValue);
// Subscribe to changes
myAtom.subscribe((value) => {
  console.log(value);
});

Usage examples

Vanilla typescript

import { atom, CONFIG, middleware } from "yaasl";

// Provide an app name to yaasl
CONFIG.name = "demo-vanilla";

// Create a counter atom that is connected to the local storage
const counter = atom({
  name: "counter", // local storage key will be "demo-vanilla/counter"
  defaultValue: 0,
  middleware: [localStorage()],
});

function setupCounter(element: HTMLButtonElement) {
  const updateCounterText = (value: number) =>
    (element.innerHTML = `count is ${value}`);

  element.addEventListener("click", () => {
    // Set the value of the atom
    counter.set((previous) => previous + 1);
  });

  // Subscribe to value changes
  counter.subscribe((value) => updateCounterText(value));

  // Read the value of the atom in the store
  updateCounterText(counter.get());
}

const counter = document.getElementById("counter");
setupCounter(counter);

React

import { atom, CONFIG, localStorage, useAtom } from "yaasl/react";

// Provide an app name to yaasl
CONFIG.name = "demo-react";

// Create a counter atom that is connected to the local storage
const counter = atom({
  name: "counter", // local storage key will be "demo-vanilla/counter"
  defaultValue: 0,
  middleware: [localStorage()],
});

export const Counter = () => {
  // Use the atom like you would use a state
  const [value, setValue] = useAtom(counter);

  const onClick = () => setValue((previous) => previous + 1);

  return <button onClick={onClick}>count is {value}</button>;
};