@onvo-ai/react NPM

Onvo AI react library

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.

Installation

You can install this UI library using npm or yarn:

npm install @onvo-ai/react

yarn add @onvo-ai/react

Usage

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>
  );
};

Contributing

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.

Steps

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.

onvo ui react library tutorial learning educational example beginner-friendly practice

@heroicons/react @internationalized/date @monaco-editor/react @onvo-ai/chartjs-chart-map @onvo-ai/js @radix-ui/react-accordion @radix-ui/react-checkbox @radix-ui/react-dropdown-menu @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-tooltip @react-aria/datepicker @react-google-maps/api @react-stately/datepicker @remixicon/react @tailwindcss/container-queries chart.js chartjs-adapter-date-fns chartjs-adapter-dayjs-4 chartjs-adapter-spacetime chartjs-chart-funnel chartjs-chart-matrix chartjs-chart-sankey chartjs-chart-wordcloud chartjs-plugin-datalabels chartjs-plugin-zoom clsx cron-converter cronstrue css-loader date-fns dayjs jwt-decode mini-svg-data-uri numeral react-autosize-textarea react-chartjs-2 react-data-grid react-day-picker react-error-boundary react-grid-layout react-markdown react-multi-email react-resizable-panels react-scan react-simple-wysiwyg remark-gfm sonner tailwind-merge tailwind-variants use-prefers-color-scheme zustand

@onvo-ai/web-components

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago