DEV Community

Cover image for Getting Hooked on Stoxy
Matsuuu
Matsuuu

Posted on

2 2

Getting Hooked on Stoxy

Stoxy is a modern state management library built around creating reactive, stateful and persistent web experiences.

Stoxy allows you to easily control the global state of your application, and tap into said state when needed.

The newest addition to Stoxy is a new add-on library: Stoxy Hooks.

Stoxy Hooks are a easy way to integrate Stoxy to any React or Preact application.

Examples

Here I'll show a few simple examples of Stoxy Hooks in action

A Simple Clicker

import { useStoxy } from "@stoxy/hooks";
import React from "react";

export function Clicker() {
    const { state, update } = useStoxy(React, {
        key: "demo.counter",
        state: 0
    });

    function inc() {
        update(c => c += 1);
    }

    return (
        <div>
          <p>Pushed {state} times</p>
          <button onClick={inc} type="button">Click</button>
        </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

A Todo List

import { useStoxy } from "@stoxy/hooks";
import * as preact from "preact/hooks";
export function TodoList() {
    const { state } = useStoxy(preact, {
        key: "todo-list",
        state: {
            items: []
        },
        init: true,
        persist: true
    });

    return (
        <ul>
            {state.items.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
    );
}
Enter fullscreen mode Exit fullscreen mode
import { useStoxy } from '@stoxy/hooks';
import React from 'react';

export function AddToList() {
    const { add } = useStoxy(React, { key: 'todo-list' });

    function addItem(e) {
        e.preventDefault();
        const formData = new FormData(e.target);
        const taskName = formData.get('task');

        add({ created: Date.now(), name: taskName });

        const inputField = document.querySelector("input[name='task']")
        inputField.value = "";
    }

    return (
        <form onSubmit={addItem}>
            <input type="text" name="task" />
            <input type="submit" value="Add" />
        </form>
    );
}
Enter fullscreen mode Exit fullscreen mode

Get Started

You can easily get started using Stoxy hooks with just one quick install:

npm install @stoxy/hooks
Enter fullscreen mode Exit fullscreen mode

And you're all set!

The whole Stoxy ecosystem is extremely lightweight, in package size and when writing code.

Read more about the subject on the Stoxy Website

If you like how Stoxy makes managing state simple, Join the almost 50 Stargazers on GitHub

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (3)

Collapse
 
ivan_jrmc profile image
Ivan Jeremic • • Edited

Is Stoxy using indexedDB?

Collapse
 
matsuuu profile image
Matsuuu •

Yes! Stoxy uses IndexedDB to persist the state data, and lighten the cache on complex applications.

Read more about it here: stoxy.dev/docs/

Collapse
 
ivan_jrmc profile image
Ivan Jeremic • • Edited

Cool I work on a similar thing for the last few weeks 🤣 I'm currently at a point where I want to make form inputs to work I see you solved it also very nice

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more