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 aClient
instance. It takes an optionalClientOptions
object as parameter with the following properties.- origin
string
- if you have a branded app, specify your custom domain here (exinitClient({ 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.
- origin
- 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.