Stoxy Hooks: библиотека дополнений для интеграции Stoxy с приложениями React и Preact

Оснащенная веб-компонентами система управления реактивным состоянием Stoxy получила новую библиотеку дополнений Stoxy Hooks, которая позволяет интегрировать Stoxy в любое приложение React или Preact. Об этом в блоге на dev.to написал Java-разработчик под ником Matsuuu. 

Установка

Чтобы начать работу со Stoxy Hooks, выполните следующую команду: 

npm install @stoxy/hooks

Stoxy Hooks в действии

•   Создание простого кликера с помощью Stoxy Hooks

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

•   Todo-list с помощью Stoxy Hooks

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

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