Read the docs here

Introduction

Stayte is a library that helps you to create persistent state in your application by using every possible peristent storage (cookies, query, local storage or session storage) in natural way.

tired to re-invent the wheel at every new project, Stayte is here to help you to save time and effort.

It's inspired by the concept of signal and it's a great fit for React applications, but it can be used in any JavaScript application.

Stayte could also be used in the server side by applying a simple patch (only next.js is supported for now).

Features

- 🔌 Signal-like
- 💾 Persistent state
- 🔍 Type-Safe
- 📡 SSR Friendly
- 🧪 Fully tested
- 📦 Zod validation

Inspiration

The name stayte is the concatenation of the words "stay" and "state".

Stayte is inspired by multiple libraries, here is a list of them:

- Nuqs
- Preact signal
- Jotai

Concept

What is a "persistent state" ?

A persistent state is a state that is stored in a place that is not destroyed when the application is closed, like
a page reload or a tab close.

There is many different area that is used to store a peristent state

- Local storage (client)
- Session storage (client)
- Cookies (SSR)
- Query string (SSR)

In many project, as a developer, you will need to interact with a peristent state
by using the native browser API or by using a library

Problem, there is no library that regroup all peristent state in one place, with a unified API.

Stayte is here to help you to save time and effort.

What is a "gluon" ?

A gluon is the smallest unit of stayte, it's a class used to interact with every peristent state.

He's able to subscribe to changes, set a value and get the value.

It's look like a signal from preact

Also a gluon can be composed of other gluons and make a chain of reaction.

:::info
The name "gluon" is inspired by the physical gluon, it's a quantum particle that is responsible of the link between the quarks.
:::

Basic usage

Declare a gluon

The first way to use staye is to use it in vanilla javascript code.

You declare a gluon by calling the gluon funcition and passing the name of the gluon and
the source where the gluon will be persisted or not (memory source)

``js
import { gluon } from "stayte";

const nameGluon = gluon('name', {
from:
})
`

allowed source are:

- query: The query string of the url
- cookies: The cookies of the browser
- localStorage: The local storage of the browser
- sessionStorage: The session storage of the browser
- memory`: The memory of the browser