Integrating dashboard into your React app is a straightforward three-step process.

### **1) Install Semaphor Package**

Open your terminal in your project directory and run the following command. This command installs the `semaphor` package and adds it to your project dependencies.

```markdown copy
npm i semaphor
```

### **2) Get Auth Token**

Before rendering the `Dashboard`, first acquire the `AuthToken`. This token enhances the security of your dashboard by restricting access to only users with the token. Make a POST fetch call as shown below.

```jsx copy {1-3}
const DASHBOARD_ID = 'd_cf007a8b-19bc-46ad-8787-2915445b7b86'; // Replace with your actual dashboard ID
const DASHBOARD_SECRET = 'ds_f32f0b30-b7e1-40f9-ba6a-9804a5b9d635'; // Replace with your actual dashboard secret
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';

async function fetchToken() {
  try {
    const response = await fetch(TOKEN_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        dashboardId: DASHBOARD_ID,
        dashboardSecret: DASHBOARD_SECRET,
      }),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const token = await response.json();
    if (token?.accessToken) {
      setAuthToken(token);
    }
  } catch (error) {
    console.error('There was an error!', error);
  }
}
```

### **3) Initialize Dashboard**

Here is a simple example of a React component that demonstrates how to use the `Dashboard` component from the `semaphor` package. Make sure you import style.css either at the beginning of your component or in your global CSS file. This step is necessary for correctly loading your dashboard styles.

```tsx copy {3, 11}
import { useEffect, useState } from 'react';
import { AuthToken, Dashboard } from 'semaphor';
import '../node_modules/semaphor/dist/style.css'; // IMPORTANT! Include the CSS file. This is the default style, you can customize it.

function App() {
  const [authToken, setAuthToken] = useState<AuthToken>();

  return (
    <div>
      <h2>My cool dashboard</h2>
      <Dashboard authToken={authToken} id={DASHBOARD_ID} />
    </div>
  );
}
```

### **Full Code**

Here is the complete React code that uses the above steps. You can copy and paste this example into your own application.

```tsx {3-7, 31, 43} copy filename="App.tsx"
import { useEffect, useState } from 'react';
import { AuthToken, Dashboard } from 'semaphor';
import '../node_modules/semaphor/dist/style.css'; // IMPORTANT! Include the CSS file. This is the default style, you can customize it.

const DASHBOARD_ID = 'd_cf007a8b-19bc-46ad-8787-2915445b7b86'; // Replace with your actual dashboard ID
const DASHBOARD_SECRET = 'ds_f32f0b30-b7e1-40f9-ba6a-9804a5b9d635'; // Replace with your actual dashboard secret
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';

function App() {
  const [authToken, setAuthToken] = useState<AuthToken>();

  useEffect(() => {
    async function fetchToken() {
      try {
        const response = await fetch(TOKEN_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            dashboardId: DASHBOARD_ID,
            dashboardSecret: DASHBOARD_SECRET,
          }),
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const token = await response.json();
        if (token?.accessToken) {
          setAuthToken(token);
        }
      } catch (error) {
        console.error('There was an error!', error);
      }
    }
    fetchToken();
  }, []);

  return (
    <div>
      <h2>My cool dashboard</h2>
      <Dashboard authToken={authToken} id={DASHBOARD_ID} />
    </div>
  );
}

export default App;
```

### **Key Considerations**

- **Security Note:** Keep the `DASHBOARD_SECRET` secure and do not expose it in client-side code in production. This example is for demonstration purposes only. When deploying in production, obtain the authentication token from a secure, server-side environment.
- **Fetching the AuthToken:** Before the dashboard can be displayed, an authentication token must be fetched. The `useEffect` hook is used to perform this action when the component mounts.
