Link copied to clipboard!

React API

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 children of a single CordProvider component.

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

<CordProvider clientAuthToken="<CLIENT_AUTH_TOKEN>">
  <Sidebar />

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.


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.


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 (
      <PagePresence />
      { === "home" && <Home />}
      { === "settings" && <Settings />}

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

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