yaasl - yet another atomic store library

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

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

Name	Description
@yaasl/core	Core package for vanilla JS.	demo
@yaasl/react	React bindings for yaasl.	demo
@yaasl/preact	Preact bindings for yaasl.

Quickstart

1. Pick one of the main packages

$ npm i @yaasl/core
$ npm i @yaasl/react
$ npm i @yaasl/preact

2. Create an atom

import { atom } from "@yaasl/core";

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/core";

// 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 (or Preact)

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

// 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>;
};