> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usedatabrain.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Reactjs
## @databrainhq/plugin
> Databrain app UI web component plugin.
v0.15.135-uat
Enforced using StandardJS styleguide.
To see the full list of options please check the [options list](https://docs.usedatabrain.com/developer-docs/helpers/options).
## Install
```bash theme={"dark"}
npm install @databrainhq/plugin
```
## Github Repo Link
View the complete React integration example on GitHub
## Usage
**Quick usage:**
```tsx showLineNumbers title="App.tsx" theme={"dark"}
// React + Databrain plugin example
import React, { useState, useEffect } from 'react';
import '@databrainhq/plugin/web';
import './App.css';
declare global {
namespace JSX {
interface IntrinsicElements {
'dbn-dashboard': any;
'dbn-metric': any;
}
}
}
function App() {
const [token, setToken] = useState(null);
const dashboardId = 'your-dashboard-id'; // Replace with your actual dashboard ID
useEffect(() => {
const fetchToken = async () => {
try {
const response = await fetch('/fetch-guest-token');
if (!response.ok) {
throw new Error('Failed to fetch token');
}
const data = await response.json();
setToken(data.token); // Assuming the API returns the token in a 'token' field
} catch (error) {
console.error('Error fetching token:', error);
}
};
fetchToken();
}, []);
if (!token) {
return
Loading...
;
}
return (
);
}
export default App;
```
For embedding a Metric Card you can use the `dbn-metric` webcomponent:
```html theme={"dark"}
```
### Token
The [`token`](https://docs.usedatabrain.com/developer-docs/helpers/token-body) should be a guest token, fetched from your backend based on the current user's login information. You can follow the document below for guest token generation.
Here is an example with sample token and dashboardId that you can use in your frontend app to get started without a backend.
```html theme={"dark"}
```
#### Breakdown:
Import the library main or index or App or layout file
```ts theme={"dark"}
import '@databrainhq/plugin/web';
```
Once the library is imported, the web-components `dbn-dashboard`, `dbn-metrics` are available to use anywhere inside your app. And you can use it anywhere in your app like:
```tsx theme={"dark"}
const Example = () => {
return (
);
};
```
## Intgerating Metric
```tsx theme={"dark"}
const Example = () => {
return (
);
};
```