Link copied to clipboard!
Mobile navigation button - closed state

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 in the subtree 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.


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

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

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