If you’re using React on the client, you can use our React API for a smoother experience
Install the @cord-sdk/react package via npm.
npm install @cord-sdk/react
All the Cord React components must be in the subtree of a single CordProvider
component.
import { CordProvider, PagePresence } from "@cord-sdk/react";
<CordProvider clientAuthToken="<CLIENT_AUTH_TOKEN>">
<Sidebar />
</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 usingCordProvider.CordProviderwill do that automatically.
| Name | ||
|---|---|---|
clientAuthToken |
required |
The client auth token to use when connecting to Cord. |
enableTasks |
default: true optional |
Whether to enable the use of the tasks integration in all components. |
navigate |
default: undefined optional |
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. |
All components are available. Visit the components library to see the available components.
The React API includes a useCordLocation hook that sets the location for all
components on the page that don’t have their location 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, useCordLocation } from "@cord-sdk/react";
function App(props: Props) {
return (
<CordProvider>
<PagePresence />
{props.page === "home" && <Home />}
{props.page === "settings" && <Settings />}
</CordProvider>
);
}
function Home(props: Props) {
useCordLocation({ page: "home" });
}
function Settings(props: Props) {
useCordLocation({ page: "settings" });
}
On this page