React Dashboard | Embed Dashboards In React Application

Add data visualizations in React applications in no time!

Getting your embedded dashboards to production was never as easy.

Simply install the @cumul.io/react-cumulio-dashboard package on npm & import it into your application. Add your React dashboard component with a few lines of code and you’re ready to go to production!

Need some more inspiration before getting started? Check out the sample React integration on Codesandbox.

Install package

 import { CumulioDashboardComponent } from '@cumul.io/react-cumulio-dashboard';
 import { useRef } from 'react';
 ...
 function CumulioWrapper() {
     const ref = useRef(null);
     return (
         <div className="App">
             <CumulioDashboardComponent
                 ref={ref}
                 authKey="<!-- your generated authKey -->"
                 authToken="<!-- your generated authToken -->"
                 dashboardSlug="test"
                 switchScreenModeOnResize={false}
                 loaderSpinnerColor="rgb(0, 81, 126)"
                 loaderSpinnerBackground="rgb(236 248 255)"
                 itemsRendered={(e) => console.log('itemsRendered', e)}
             ></CumulioDashboardComponent>
         </div>
     );
 }
 ...

index.js

100%

Spaces:2

UTF-8

More than just embedding a dashboard in React!

Cumul.io dashboards are data-driven tools inside your own product. Our React library lets you enjoy additional functionalities.

Enjoy multi-tenant security with tokens using your own user models

Fully customize. Even change the loader styling!

Interact between platform & dashboard with bi-directional communication

Take control: Reload specific charts & dashboards, or even change dashboards

Easily retrieve data from charts and use them for platform actions

Retrieve the filters applied in your dashboard and interact with your own platform.

React dashboards embedded in your application

Explore our example app with embedded dashboards below, and get a glimpse of the possibilities!

More than just embedding a dashboard in React!

Using a different framework than React?
We probably support it!

React dashboards embedded in your application

Explore our example app with embedded dashboards below, and get a glimpse of the possibilities!

More than just embedding a dashboard in React!

Using a different framework than React?We probably support it!

Using a different framework than React?
We probably support it!