crann/dist/types/react/hooks.d.ts

Effortless State Synchronization for Web Extensions

/**
 * Crann React Hooks Implementation
 *
 * Provides React hooks for connecting to and using a Crann store.
 */
import type { ConfigSchema, ValidatedConfig } from "../store/types";
import type { CrannHooks, CreateCrannHooksOptions } from "./types";
/**
 * Creates a set of React hooks for a Crann store.
 *
 * This is the main entry point for React integration. Call once at module
 * level with your config, then use the returned hooks in your components.
 *
 * @param config - Validated config from createConfig()
 * @param options - Optional hook options
 * @returns Object containing all Crann React hooks
 *
 * @example
 * // hooks.ts
 * import { createConfig } from 'crann';
 * import { createCrannHooks } from 'crann/react';
 *
 * const config = createConfig({
 *   name: 'myFeature',
 *   count: { default: 0 },
 *   actions: {
 *     increment: { handler: async (ctx) => ctx.setState({ count: ctx.state.count + 1 }) },
 *   },
 * });
 *
 * export const { useCrannState, useCrannActions, useCrannReady } = createCrannHooks(config);
 *
 * // MyComponent.tsx
 * function Counter() {
 *   const count = useCrannState(s => s.count);
 *   const { increment } = useCrannActions();
 *   const isReady = useCrannReady();
 *
 *   if (!isReady) return <div>Loading...</div>;
 *
 *   return <button onClick={() => increment()}>Count: {count}</button>;
 * }
 */
export declare function createCrannHooks<TConfig extends ConfigSchema>(config: ValidatedConfig<TConfig>, options?: CreateCrannHooksOptions): CrannHooks<TConfig>;