Skip to main content

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>
<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.
  • The EventProvider get main data from your event and customize sub-components based on it.