Integrating dashboard into your React app is a straightforward three-step process.
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.
npm i semaphor
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.
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);
}
}
Here is a simple example of a React component that demonstrates how to use the Dashboard
component from the semaphor
package.
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>
);
}
Here is the complete React code that uses the above steps. You can copy and paste this example into your own application.
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;
- 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.