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> ); }
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: