useInlineTrigger

Стабильный · с 0.1.0

Определяет триггер прямо внутри компонента. Триггер создаётся при монтировании, живёт до размонтирования и автоматически утилизируется при размонтировании компонента. Используй это для разовых реакций, где вытащить их в отдельный *.trigger.ts было бы оверкилом — крошечные аналитические тапы, координация модалок в рамках одного экрана, клавиатурные шорткаты, актуальные только пока открыта панель.

Для всего, что переиспользуется по приложению, — предпочитай createTrigger в выделенном файле *.trigger.ts.

Импорт

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

Сигнатура

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;
};

Параметры

Параметр	Тип	Обязательный	Описание
`config.on`	`keyof S['events']`	да	Имя события, на которое реагируем. Должно быть стабильным между рендерами.
`config.do`	`TriggerHandler<S>`	да	Тело обработчика. Получает тот же `ctx`, что и обработчик полноценного `createTrigger`.
`config.id`	`string`	нет	Необязательный debug-id. По умолчанию — авто-сгенерированный стабильный id (`inline:<n>`).

Возвращает

void. Триггер регистрируется в useEffect и утилизируется при размонтировании.

Примеры

Аналитический тап в рамках одного экрана

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>;
}

Клавиатурный шорткат, пока открыта панель

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>;
}

Фиксированный id для тестов

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;
}

Чтение условий / зажигание действий

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;
}

Замечания

См. также

createTrigger Полноценный конструктор — предпочтителен для переиспользуемых триггеров.

useEvent Зажги событие, на которое реагирует inline-триггер.

TriggerScope Скоупит inline-триггеры на поддерево.

Руководство: когда инлайнить Разовые реакции vs файловые триггеры.