Flooks | useFlowEvent

useFlowEvent

Hook for subscribing to events on the Flow blockchain.

Import

import { useFlowEvent } from '@doodlesteam/flooks';

Usage

const MyComponent = () => {
  const handleEvent = (event: { id: string; to?: string }) => {
    console.log('Deposit id:', event.id);
    console.log('Deposit to:', event.to);
  };
 
  useFlowEvent<{ id: string; to?: string }>({
    eventName: 'A.631e88ae7f1d7c20.NonFungibleToken.Deposit',
    listener: handleEvent,
  });
 
  return <div>Listening for Flow events...</div>;
};

API Reference

Props

useFlowEvent accepts a UseFlowEventProps<T> object:

eventName: string | FlowEventName - The name of the Flow event to listen to.
listener: (event: T) => void - A callback function that is invoked when the event occurs.
once: boolean (optional) - If true, the listener will only be invoked once. Default to false.

You can use eventName prop with the event name (A.631e88ae7f1d7c20.Deposit) or with FlowEventName object:

...
eventName: {
    contractAddress: '0x631e88ae7f1d7c20', // You don't need to remove the 0x prefix, like in the event name.
    contractName: 'NonFungibleToken',
    eventName: 'Deposit',
}
...

Example

useFlowEvent({
  eventName: 'UserTransaction',
  listener: (transaction) => console.log(transaction),
  once: true,
});

Return Value

The hook does not return a value but allows the component to react to specific Flow blockchain events.

useFlowDisconnect useFlowScript