useEventHandler

@coinbase/cds-common@8.13.6

Creates event handlers for components based on the EventHandlerProvider configuration. It enables centralized event handling and analytics tracking by mapping component actions to configured handlers.

Import

import { useEventHandler } from '@coinbase/cds-common/hooks/useEventHandler'

SourceView source code

---

Usage

Loading...

󰙡

Live Code

function ExampleWithProvider() {
  const { show: showToast } = useToast();

  // Example provider configuration with action mapping
  const config = {
    actionMapping: {
      onClick: 'click', // Maps CDS onClick to custom 'click' handler
    },
    handlers: {
      Button: {
        click: ({ componentName, data }) => {
          showToast(`Button ${componentName} clicked with data: ${JSON.stringify(data)}`);
        },
      },
    },
  };

  function ButtonExample() {
    const eventConfig = {
      actions: ['click'], // Use mapped action name
      componentName: 'mapped_button',
      data: {
        source: 'action_mapping_example',
      },
    };

    const handleButtonClick = useEventHandler('Button', 'onClick', eventConfig);

    return <Button onClick={handleButtonClick}>Click for Mapped Action</Button>;
  }

  return (
    <EventHandlerProvider config={config}>
      <ButtonExample />
    </EventHandlerProvider>
  );
}