docs

Documentation

Complete documentation for @ubidots/react-html-canvas library.

📚 API Reference

Provider

• UbidotsProvider - Main provider component

Hooks

Available Hooks

• useUbidotsReady - Ready state management
• useUbidotsActions - Dashboard actions
• useUbidotsAPI - API client
• useUbidotsSelectedDevice - Single device selection

Other Hooks (Documentation Coming Soon)

The following hooks are available in the library but documentation is being prepared:

• useUbidotsToken - Authentication token
• useUbidotsJWT - JWT token
• useUbidotsSelectedDevices - Multiple device selection
• useUbidotsDashboardDateRange - Date range handling
• useUbidotsRealTimeStatus - Real-time status
• useUbidotsDeviceObject - Device object data
• useUbidotsDashboardObject - Dashboard object data
• useUbidotsWidget - Widget information

🎯 Guides

Comprehensive guides are being prepared. For now, please refer to the examples folder for practical usage patterns.

🔧 Types

TypeScript type definitions are available in the library. Detailed type documentation is being prepared.

📖 Examples

See the examples folder for complete working examples:

• Basic Usage - Simple setup and usage
• Device Selector - Interactive device selection
• Real-time Dashboard - Live data streaming and controls
• Complete Widget - Comprehensive example testing all features
• With HOCs - Higher-Order Components usage

🚀 Quick Reference

Basic Setup

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

function MyWidget() {
  const ready = useUbidotsReady();
  const device = useUbidotsSelectedDevice();

  if (!ready) return <div>Loading...</div>;

  return <div>Device: {device?.name}</div>;
}

function App() {
  return (
    <UbidotsProvider readyEvents={['receivedToken']}>
      <MyWidget />
    </UbidotsProvider>
  );
}

Common Actions

import { useUbidotsActions } from '@ubidots/react-html-canvas';

function Controls() {
  const { setDashboardDevice, refreshDashboard, setRealTime } =
    useUbidotsActions();

  return (
    <div>
      <button onClick={() => setDashboardDevice('device-id')}>
        Select Device
      </button>
      <button onClick={refreshDashboard}>Refresh</button>
      <button onClick={() => setRealTime(true)}>Enable Real-time</button>
    </div>
  );
}

🔍 Search

Use your browser's search (Ctrl/Cmd + F) to quickly find specific hooks, types, or concepts in this documentation.