useInlineTrigger

Stable · since 0.1.0

Defines a trigger inline inside a component. The trigger is created on mount, lives until unmount, and is automatically disposed when the component unmounts. Use this for one-off reactions where pulling them into a separate *.trigger.ts file would be overkill — tiny analytics taps, modal-stack coordination scoped to one screen, keyboard shortcuts that only matter while a panel is open.

For anything reusable across the app — prefer createTrigger in a dedicated *.trigger.ts file.

Import

import { useInlineTrigger } from '@triggery/react';

Signature

function useInlineTrigger<S extends TriggerSchema>(
  config: UseInlineTriggerConfig<S>,
): void;

type UseInlineTriggerConfig<S> = {
  readonly on: keyof NonNullable<S['events']> & string;
  readonly do: TriggerHandler<S>;
  readonly id?: string;
};

Parameters

Param	Type	Required	Description
`config.on`	`keyof S['events']`	yes	Event name to react to. Must be stable between renders.
`config.do`	`TriggerHandler<S>`	yes	Handler body. Receives the same `ctx` as a full `createTrigger` handler.
`config.id`	`string`	no	Optional debug id. Defaults to an auto-generated stable id (`inline:<n>`).

Returns

void. The trigger is registered in useEffect and disposed on unmount.

Examples

Analytics tap scoped to one screen

import { useInlineTrigger } from '@triggery/react';

function CtaSection() {
  useInlineTrigger<{ events: { 'cta:click': { id: string } } }>({
    on: 'cta:click',
    do: ({ event }) => {
      window.analytics?.track('cta_click', { id: event.payload.id });
    },
  });
  return <button type="button">Sign up</button>;
}

Keyboard shortcut while a panel is open

import { useInlineTrigger } from '@triggery/react';

function ShortcutsPanel({ onClose }: { onClose: () => void }) {
  useInlineTrigger<{ events: { 'keyboard:escape': void } }>({
    on: 'keyboard:escape',
    do: () => onClose(),
  });
  return <div>Press Esc to close</div>;
}

Pinned id for tests

import { useInlineTrigger } from '@triggery/react';

function Counter() {
  useInlineTrigger<{ events: { increment: void } }>({
    id: 'counter:tick', // stable across remounts — easier to mock in tests
    on: 'increment',
    do: () => console.log('tick'),
  });
  return null;
}

Reading conditions / firing actions

import { useInlineTrigger } from '@triggery/react';

function ChatRow() {
  useInlineTrigger<{
    events:     { 'message:select': { id: string } };
    conditions: { selectedId: string | null };
    actions:    { highlight: { id: string } };
  }>({
    on: 'message:select',
    do: ({ event, conditions, actions }) => {
      if (event.payload.id === conditions.selectedId) return;
      actions.highlight?.({ id: event.payload.id });
    },
  });
  return null;
}

Notes

createTrigger The full constructor — preferred for reusable triggers.

useEvent Fire the event your inline trigger reacts to.

TriggerScope Scope inline triggers to a subtree.

When to inline guide One-off reactions vs file-level triggers.