@delpi/zen-react

React bindings for Zen. Includes hooks and provider for runtime and intent system.

LIVE DEMO

Installation

npm install @delpi/zen-react
# or
pnpm add @delpi/zen-react

Usage

import React from 'react';
import { ZenProvider, useStore } from '@delpi/zen-react';
import { createStore } from '@delpi/zen-state';
import { Runtime } from '@delpi/zen-core';

const runtime = new Runtime();
const counterStore = createStore({ count: 0 });

export function App() {
  return (
    <ZenProvider runtime={runtime}>
      <Counter />
    </ZenProvider>
  );
}

function Counter() {
  const state = useStore(counterStore);
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => counterStore.set({ count: state.count + 1 })}>Increment</button>
    </div>
  );
}

License

MIT