This react package can be used to display the list of dashboards available to a user or single dashboard from Onvo AI. The components are also completely customizable.
You can install this UI library using npm or yarn:
npm install @onvo-ai/react
yarn add @onvo-ai/react
To use this UI library in your project, import the components you need from the library and use them in your React apps.
import { Wrapper, DashboardList } from "@onvo-ai/react";
const baseUrl = "https://dashboard.onvo.ai";
const ListPage = () => {
const [accessToken, setAccessToken] = useState("");
const userId = "123456";
useEffect(() => {
fetch("/api/get-token/" + userId)
.then((data) => data.json())
.then((data) => {
setAccessToken(data.token);
});
}, []);
return (
<Wrapper baseUrl={baseUrl} token={accessToken}>
<DashboardList />
</Wrapper>
);
};
const DashboardPage = (id) => {
const [accessToken, setAccessToken] = useState("");
const userId = "123456";
useEffect(() => {
fetch("/api/get-token/" + userId)
.then((data) => data.json())
.then((data) => {
setAccessToken(data.token);
});
}, []);
return (
<Wrapper baseUrl={baseUrl} token={accessToken}>
<Dashboard id={id} />
</Wrapper>
);
};
You can fork the repository and make a pull request with your changes. Make sure to also update the docs with any relevant changes you have made.
- Fork the repository.
- Clone the repository to your local machine.
- Install the dependencies using
npm install
. - View the components in the browser using
npm run storybook
. - Make your changes.
- Test the changes using
npm test
. - Build the library using
npm run build
. - Commit the changes and push them to your forked repository.
- Publish the package on npm.
- Install and use the package in your project.