React

DemoPenguin seamlessly integrates with React applications. Follow this guide to add DemoPenguin to your React project.

Installation

Note

Make sure that react and react-dom are version 18 or higher.


npm install demo-penguin


pnpm add demo-penguin


yarn add demo-penguin


bun add demo-penguin

Or using pnpm:


pnpm add demo-penguin

Basic Setup

Add DemoPenguin to your root component:

src/App.tsx


import { DemoPenguin } from "demo-penguin"
 
function App() {
  return (
    <DemoPenguin
      clientToken="your-client-token"
      userId="user-id"
      userInfo={{
        userId: "user-id",
        userFirstName: "John",
        userLastName: "Doe",
        userEmail: "john.doe@example.com",
        userType: "admin",
      }}
      variables={{
        [key: string]: string;
      }}
    >
      {/* Your app components */}
    </DemoPenguin>
  )
}
 
export default App

For applications using React Router, wrap your router with DemoPenguin:

src/main.tsx


import { DemoPenguin } from "demo-penguin"
import { BrowserRouter } from "react-router-dom"
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <DemoPenguin
      clientToken="your-client-token"
      userId="user-id"
      userInfo={{
        userId: "user-id",
        userFirstName: "John",
        userLastName: "Doe",
        userEmail: "john.doe@example.com",
        userType: "admin",
      }}
      variables={{
        [key: string]: string;
      }}
    >
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </DemoPenguin>
  </React.StrictMode>
)

Configuration Options

Required Props

Prop	Type	Description
`clientToken`	`string`	Your DemoPenguin application token
`userInfo`	`object`	User information
`variables`	`object`	Variables to be used in the DemoPenguin

User Information

The userInfo object can include:


interface UserInfo {
  userId?: string;
  userFirstName?: string;
  userLastName?: string;
  userEmail?: string;
  userType?: string;
}

Variables

Variables are used to pass data to the DemoPenguin. They are passed in as an object with a key of the variable name and a value of the variable value. You can reference variables in your DemoPenguin flows by using the {{variableName}} syntax.


interface Variables {
  [key: string]: string;
}
 
 
> [!TIP]
>
> Always use environment variables for your client token to keep it secure and easily configurable across environments.
 
> [!NOTE]
>
> For Create React App, use `REACT_APP_` prefix for environment variables (e.g., `REACT_APP_DEMO_PENGUIN_TOKEN`).