# Dashboard runtime library

## Overview

The *Dashboard Runtime Library* written in [React](https://es.react.dev/), is the backbone that enables building applications within Ubidots with the capability of interacting with dashboard data, events and the Ubidots API.

## Getting started

### Add the library to your project

Run the following command at the root of the project where you want to add the library

{% tabs %}
{% tab title="PNPM" %}

```bash
pnpm add @ubidots/react-html-canvas
```

{% endtab %}

{% tab title="Yarn " %}

```bash
yarn add @ubidots/react-html-canvas
```

{% endtab %}
{% endtabs %}

#### Peer Dependencies

* react >= 16.8
* react-dom >= 16.8

### Usage

Wrap your app with the Provider and use hooks to access dashboard data/event

```js
import 
  UbidotsProvider,
  useUbidotsReady,
  useUbidotsSelectedDevice,
  useUbidotsActions,
} from '@ubidots/react-html-canvas';

function DeviceInfo() {
  const ready = useUbidotsReady();
  const device = useUbidotsSelectedDevice();
  const { setDashboardDevice } = useUbidotsActions();

  if (!ready) return <span>Loading...</span>;
  return (
    <div>
      <pre>{JSON.stringify(device, null, 2)}</pre>
      <button onClick={() => setDashboardDevice('device-id')}>
        Select Device
      </button>
    </div>
  );
}

export default function App() {
  return (
    <UbidotsProvider readyEvents={['receivedToken']}>
      <DeviceInfo />
    </UbidotsProvider>
  );
}
```

## API & examples

Go to the project's [repo](https://github.com/ubidots/react-html-canvas?tab=readme-ov-file) for understanding more about all the available hooks and actions that the library expose.&#x20;