Event thing

Hook to return events from a SSE feed

npm i --save sse-event-wrapper

Usage

const MyComponent = () => {
  const [events, { connected, error }] = useOrderEvents({
    url,
    debug: true, // log updates to console if required?
  });

  if (error) {
    <p>Ooops</p>;
  }

  return (
    <>
      {events.map((e) => (
        <pre key={e.id}>{JSON.stringify(e)}</pre>
      ))}
    </>
  );
};

Usage (with callback)

Essential to use useCallback to provide stable reference to function

import { useCallback } from 'react';
import { useOrderEvents } from 'an-event-thing';

const MyComponent = () => {
  const onEvent = useCallback(() => alert('There was an event!'), []);

  const [events, { connected, error }] = useOrderEvents({
    url,
    debug: true, // log updates to console if required?
    onEvent, // optional and not recommended
  });

  if (error) {
    <p>Ooops</p>;
  }

  return (
    <>
      {events.map((e) => (
        <pre key={e.id}>{JSON.stringify(e)}</pre>
      ))}
    </>
  );
};