Link copied to pasteboard!

React API

If you’re using React on the client, you can use our React API for a smoother experience.

Installation

Install the @cord-sdk/react package via npm.

npm install @cord-sdk/react

CordProvider

All the Cord React components must be children of a single CordProvider component.

import { CordProvider, PagePresence } from "@cord-sdk/react";

<CordProvider clientAuthToken="<CLIENT_AUTH_TOKEN>">
  <PagePresence />
</CordProvider>;

There should be only one CordProvider at a time, so include it in your top-level component.

Don't call window.CordSDK.init() when using CordProvider, CordProvider will do that automatically.

Properties

Name Default Description
clientAuthToken   required The client auth token to use when connecting to Cord.
enableTasks true optional When false, disables the use of the tasks integration in all components.
navigate undefined When defined, allows overriding the behaviour of navigating to a specific URL, so you can substitute your own routing logic. The value must be a function that receives the destination URL as a string argument and returns true if the navigation is handled by the function.

Components

All components are available. Visit the components library to see the available components.

useCordContext

The React API includes a useCordContext hook that sets the context for all components on the page that don’t have their context property set. It is a singleton for the entire CordProvider, so you should include only one component that uses it at a time, typically in the component for the screen that’s currently active or as part of your app router.

import { CordProvider, PagePresence, useCordContext } from "@cord-sdk/react";

function App(props: Props) {
  return (
    <CordProvider>
      <PagePresence />
      {props.page === "home" && <Home />}
      {props.page === "settings" && <Settings />}
    </CordProvider>
  );
}

function Home(props: Props) {
  useCordContext({ page: "home" });
}

function Settings(props: Props) {
  useCordContext({ page: "settings" });
}