@ticketlayer/elements-react

React wrappers for Ticketlayer Elements. Each Tl* component renders the matching <tl-*> custom element from @ticketlayer/elements, which is a peer dependency: install both.

npm install @ticketlayer/elements @ticketlayer/elements-react

import { useEffect } from 'react';
import { createLiveClient } from '@ticketlayer/live';
import { defineCustomElements, setSDK, TlEventList, TlCartBadge } from '@ticketlayer/elements-react';

function App() {
  useEffect(() => {
    // Register the custom elements after hydration, then hand Elements the
    // Live client so they can read the catalogue and share one cart.
    defineCustomElements();
    createLiveClient({ baseUrl: 'https://api.live.ticketlayer.com', publishableKey: 'tlpk_...' }).then(setSDK);
  }, []);

  return (
    <>
      <TlCartBadge />
      <TlEventList />
    </>
  );
}

Events are exposed as onTl* props (onTlAddToCart, onTlError, ...) and receive the CustomEvent; the payload is on event.detail. The component reference, props and events for every element are in the elements package's elements.catalogue.json and docs/COMPONENTS.md.

The wrapper set is generated from the elements build, so @ticketlayer/elements-react always ships against the same major of @ticketlayer/elements.