@dreamfusion/pollen-react

React hooks for Pollen 2.0 reactive framework.

Installation

npm install @dreamfusion/pollen @dreamfusion/pollen-react

Quick Start

import { useCounter, useStore, useDebounce } from '@dreamfusion/pollen-react';

function Counter() {
  const { value, increment, decrement, reset } = useCounter(0, 1);
  
  return (
    <div>
      <h1>{value}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

function SearchInput() {
  const [query, setQuery] = useStore('');
  const debouncedQuery = useDebounce(query, 500);
  
  return (
    <div>
      <input 
        value={query} 
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {debouncedQuery}</p>
    </div>
  );
}

Hooks

usePollen

Create a pollinated object and manage its lifecycle with React.

import { usePollen, useNode } from '@dreamfusion/pollen-react';

function MyComponent() {
  const state = usePollen(() => ({}), {
    count: {
      type: 'number',
      get: () => 0,
      set: (v) => {}
    }
  });
  
  const count = useNode(state, 'count');
  
  return <div>Count: {count}</div>;
}

useNode

Subscribe to a single node value and re-render on changes.

const value = useNode(pollinated, 'nodeName');

useSetNode

Get a setter function for a node.

const setValue = useSetNode(pollinated, 'nodeName');
setValue(42);

useNodes

Subscribe to multiple nodes at once.

const { count, name, active } = useNodes(pollinated, ['count', 'name', 'active']);

useConnection

Create a connection between two pollinated objects.

useConnection(source, 'output', target, 'input', (value) => value * 2);

useFactory

Create a factory component and manage its lifecycle.

const counter = useFactory('logic.counter');

useCounter

Create a counter with increment, decrement, and reset.

const { value, increment, decrement, reset } = useCounter(0, 1);

useStore

Create a simple value store (like useState but with Pollen).

const [value, setValue] = useStore(initialValue);

useDebounce

Create a debounced value.

const debouncedValue = useDebounce(value, 300);

useThrottle

Create a throttled value.

const throttledValue = useThrottle(value, 1000);

useTimer

Create a countdown/stopwatch timer.

const { elapsed, remaining, running, complete, start, stop, reset } = useTimer(60000);

Complete Example

import React from 'react';
import { useCounter, useConnection, useFactory, useNode } from '@dreamfusion/pollen-react';

function App() {
  // Create two counters
  const counter1 = useFactory('logic.counter');
  const counter2 = useFactory('logic.counter');
  
  // Connect counter1 to counter2 (double the value)
  useConnection(counter1, 'value', counter2, 'value', (v) => v * 2);
  
  const value1 = useNode(counter1, 'value');
  const value2 = useNode(counter2, 'value');
  
  return (
    <div>
      <div>
        <h2>Counter 1: {value1}</h2>
        <button onClick={() => setNode(counter1, 'add', true)}>+</button>
      </div>
      
      <div>
        <h2>Counter 2 (2x): {value2}</h2>
      </div>
    </div>
  );
}

TypeScript Support

Full TypeScript support with type inference:

import { usePollen, useNode } from '@dreamfusion/pollen-react';

interface MyState {
  count: number;
  name: string;
}

const state = usePollen<MyState>(() => ({ count: 0, name: '' }), {
  count: { type: 'number', get: () => 0, set: (v) => {} },
  name: { type: 'string', get: () => '', set: (v) => {} }
});

const count = useNode<number>(state, 'count');
const name = useNode<string>(state, 'name');

License

MIT