Skip to content

Getting Started

Get started with the TDK within your React application.

Installation

npm
npm i @treasure-dev/tdk-react

Quick Start

Wrap App in Treasure Provider

Wrap your app in the TreasurePovider React Context Provider and pass the project slug for your TDK-compatible project.

import { TreasureProvider } from "@treasure-dev/tdk-react";
 
function App() {
  return <TreasureProvider project="app">{/** ... */}</TreasureProvider>;
}

Use Treasure Login

Now that the context provider is set up, you can begin to use the TDK's hooks and components.

import { TreasureLoginButton, useTreasure } from "@treasure-dev/tdk-react";
 
function Nav() {
  const { isAuthenticated, address, logOut } = useTreasure();
  return isAuthenticated ? (
    <>
      {address} <button onClick={logOut}>Log Out</button>
    </>
  ) : (
    <TreasureLoginButton />
  );
}