Getting started

To start using the SDK, you must implement the following components at the root level of your website.

ClientProvider, ApplicationProvider and EventProvider

// ./src/app.tsx

import { initClient, ClientProvider } from "@swapcard/react-sdk/lib/client";
import { ApplicationProvider } from "@swapcard/react-sdk/lib/application";
import { EventProvider } from "@swapcard/react-sdk/lib/event";

function MyWebsiteApp() {
  const client = initClient();

  return (
    <ClientProvider client={client}>
      <ApplicationProvider locale="en-US">
        <EventProvider eventId="<YOUR_EVENT_ID_HERE>">
          <SubComponents />
        </EventProvider>
      </ApplicationProvider>
    </ClientProvider>
  );
}

• initClient is a function that returns a Client instance. It takes an optional ClientOptions object as parameter with the following properties.
  • origin string - if you have a branded app, specify your custom domain here (ex initClient({ origin: "my-custom-domain.com" })). This will fetch data specific to your application and will give you access to event that are "protected" under this domain.
• The ClientProvider purpose is to fetch data from Swapcard API and cache results.
• The ApplicationProvider get main data from your Swapcard custom application and customize sub-components based on it. You can pass the locale to affect how some part of the app are translated (dates for example).
• The EventProvider get main data from your event and customize sub-components based on it.