Aaron King

Posted on Jan 19

Building Interactive Dashboards with React Dazzle

#react #webdev #tutorial #beginners

React Dazzle is a dashboard framework for React that makes it easy to create customizable, drag-and-drop dashboards. It provides a flexible grid system and widget components for building data visualization dashboards with minimal configuration. This guide walks through setting up and creating dashboards using React Dazzle with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript

Installation

Install React Dazzle using your preferred package manager:

npm install react-dazzle

Or with yarn:

yarn add react-dazzle

Or with pnpm:

pnpm add react-dazzle

After installation, your package.json should include:

{
  "dependencies": {
    "react-dazzle": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Dazzle requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple dashboard. Create a new file src/DashboardExample.jsx:

// src/DashboardExample.jsx
import React, { useState } from 'react';
import { Dashboard, Widget } from 'react-dazzle';

function DashboardExample() {
  const [layout, setLayout] = useState([
    { i: 'widget1', x: 0, y: 0, w: 4, h: 2 },
    { i: 'widget2', x: 4, y: 0, w: 4, h: 2 }
  ]);

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Basic Dashboard Example</h2>
      <Dashboard
        layout={layout}
        onLayoutChange={setLayout}
        cols={12}
        rowHeight={100}
      >
        <Widget key="widget1" i="widget1">
          <div style={{ padding: '20px', backgroundColor: '#f0f0f0', height: '100%' }}>
            <h3>Widget 1</h3>
            <p>This is the first widget</p>
          </div>
        </Widget>
        <Widget key="widget2" i="widget2">
          <div style={{ padding: '20px', backgroundColor: '#e0e0e0', height: '100%' }}>
            <h3>Widget 2</h3>
            <p>This is the second widget</p>
          </div>
        </Widget>
      </Dashboard>
    </div>
  );
}

export default DashboardExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardExample from './DashboardExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardExample />
    </div>
  );
}

export default App;

This creates a basic dashboard with two draggable widgets.

Understanding the Basics

React Dazzle provides dashboard components:

Dashboard: Main dashboard container
Widget: Individual dashboard widgets
Layout: Grid layout configuration
Drag and drop: Move and resize widgets
Responsive: Automatic responsive behavior

Key concepts:

Layout array: Array of layout objects defining widget positions
Widget properties: Each widget has an i (id) property
Grid system: 12-column grid by default
Row height: Height of each grid row
Layout change: Handle layout changes with onLayoutChange

Here's an example with multiple widgets:

// src/AdvancedDashboardExample.jsx
import React, { useState } from 'react';
import { Dashboard, Widget } from 'react-dazzle';

function AdvancedDashboardExample() {
  const [layout, setLayout] = useState([
    { i: 'sales', x: 0, y: 0, w: 6, h: 3 },
    { i: 'revenue', x: 6, y: 0, w: 6, h: 3 },
    { i: 'users', x: 0, y: 3, w: 4, h: 2 },
    { i: 'products', x: 4, y: 3, w: 4, h: 2 },
    { i: 'analytics', x: 8, y: 3, w: 4, h: 2 }
  ]);

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h2>Advanced Dashboard Example</h2>
      <Dashboard
        layout={layout}
        onLayoutChange={setLayout}
        cols={12}
        rowHeight={100}
      >
        <Widget key="sales" i="sales">
          <div style={{ padding: '20px', backgroundColor: '#f0f0f0', height: '100%' }}>
            <h3>Sales</h3>
            <p>Monthly sales data</p>
          </div>
        </Widget>
        <Widget key="revenue" i="revenue">
          <div style={{ padding: '20px', backgroundColor: '#e0e0e0', height: '100%' }}>
            <h3>Revenue</h3>
            <p>Quarterly revenue</p>
          </div>
        </Widget>
        <Widget key="users" i="users">
          <div style={{ padding: '20px', backgroundColor: '#d0d0d0', height: '100%' }}>
            <h3>Users</h3>
            <p>Active users</p>
          </div>
        </Widget>
        <Widget key="products" i="products">
          <div style={{ padding: '20px', backgroundColor: '#c0c0c0', height: '100%' }}>
            <h3>Products</h3>
            <p>Product catalog</p>
          </div>
        </Widget>
        <Widget key="analytics" i="analytics">
          <div style={{ padding: '20px', backgroundColor: '#b0b0b0', height: '100%' }}>
            <h3>Analytics</h3>
            <p>Analytics data</p>
          </div>
        </Widget>
      </Dashboard>
    </div>
  );
}

export default AdvancedDashboardExample;

Practical Example / Building Something Real

Let's build a comprehensive analytics dashboard:

// src/AnalyticsDashboard.jsx
import React, { useState } from 'react';
import { Dashboard, Widget } from 'react-dazzle';

function AnalyticsDashboard() {
  const [layout, setLayout] = useState([
    { i: 'sales-chart', x: 0, y: 0, w: 8, h: 4 },
    { i: 'revenue-chart', x: 8, y: 0, w: 4, h: 4 },
    { i: 'users-widget', x: 0, y: 4, w: 4, h: 2 },
    { i: 'products-widget', x: 4, y: 4, w: 4, h: 2 },
    { i: 'stats-widget', x: 8, y: 4, w: 4, h: 2 }
  ]);

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h1>Analytics Dashboard</h1>
      <Dashboard
        layout={layout}
        onLayoutChange={setLayout}
        cols={12}
        rowHeight={100}
      >
        <Widget key="sales-chart" i="sales-chart">
          <div style={{ padding: '20px', backgroundColor: '#f8f9fa', height: '100%', border: '1px solid #ddd', borderRadius: '4px' }}>
            <h3>Sales Chart</h3>
            <div style={{ height: 'calc(100% - 60px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <p>Sales visualization would go here</p>
            </div>
          </div>
        </Widget>
        <Widget key="revenue-chart" i="revenue-chart">
          <div style={{ padding: '20px', backgroundColor: '#f8f9fa', height: '100%', border: '1px solid #ddd', borderRadius: '4px' }}>
            <h3>Revenue Chart</h3>
            <div style={{ height: 'calc(100% - 60px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <p>Revenue visualization would go here</p>
            </div>
          </div>
        </Widget>
        <Widget key="users-widget" i="users-widget">
          <div style={{ padding: '20px', backgroundColor: '#e3f2fd', height: '100%', border: '1px solid #2196f3', borderRadius: '4px' }}>
            <h3>Users</h3>
            <div style={{ fontSize: '32px', fontWeight: 'bold', marginTop: '10px' }}>1,234</div>
            <p style={{ marginTop: '10px', color: '#666' }}>Active users</p>
          </div>
        </Widget>
        <Widget key="products-widget" i="products-widget">
          <div style={{ padding: '20px', backgroundColor: '#f3e5f5', height: '100%', border: '1px solid #9c27b0', borderRadius: '4px' }}>
            <h3>Products</h3>
            <div style={{ fontSize: '32px', fontWeight: 'bold', marginTop: '10px' }}>567</div>
            <p style={{ marginTop: '10px', color: '#666' }}>Total products</p>
          </div>
        </Widget>
        <Widget key="stats-widget" i="stats-widget">
          <div style={{ padding: '20px', backgroundColor: '#e8f5e9', height: '100%', border: '1px solid #4caf50', borderRadius: '4px' }}>
            <h3>Stats</h3>
            <div style={{ fontSize: '32px', fontWeight: 'bold', marginTop: '10px' }}>89%</div>
            <p style={{ marginTop: '10px', color: '#666' }}>Performance</p>
          </div>
        </Widget>
      </Dashboard>
    </div>
  );
}

export default AnalyticsDashboard;

Now create a customizable dashboard with save/load functionality:

// src/CustomizableDashboard.jsx
import React, { useState, useEffect } from 'react';
import { Dashboard, Widget } from 'react-dazzle';

function CustomizableDashboard() {
  const [layout, setLayout] = useState([
    { i: 'widget1', x: 0, y: 0, w: 6, h: 3 },
    { i: 'widget2', x: 6, y: 0, w: 6, h: 3 },
    { i: 'widget3', x: 0, y: 3, w: 12, h: 2 }
  ]);

  useEffect(() => {
    const savedLayout = localStorage.getItem('dashboard-layout');
    if (savedLayout) {
      setLayout(JSON.parse(savedLayout));
    }
  }, []);

  const handleLayoutChange = (newLayout) => {
    setLayout(newLayout);
    localStorage.setItem('dashboard-layout', JSON.stringify(newLayout));
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h2>Customizable Dashboard</h2>
      <p>Drag and resize widgets to customize your dashboard. Layout is saved automatically.</p>
      <Dashboard
        layout={layout}
        onLayoutChange={handleLayoutChange}
        cols={12}
        rowHeight={100}
      >
        <Widget key="widget1" i="widget1">
          <div style={{ padding: '20px', backgroundColor: '#fff3cd', height: '100%', border: '1px solid #ffc107', borderRadius: '4px' }}>
            <h3>Widget 1</h3>
            <p>Drag me around!</p>
          </div>
        </Widget>
        <Widget key="widget2" i="widget2">
          <div style={{ padding: '20px', backgroundColor: '#d1ecf1', height: '100%', border: '1px solid #17a2b8', borderRadius: '4px' }}>
            <h3>Widget 2</h3>
            <p>Resize me!</p>
          </div>
        </Widget>
        <Widget key="widget3" i="widget3">
          <div style={{ padding: '20px', backgroundColor: '#d4edda', height: '100%', border: '1px solid #28a745', borderRadius: '4px' }}>
            <h3>Widget 3</h3>
            <p>Full width widget</p>
          </div>
        </Widget>
      </Dashboard>
    </div>
  );
}

export default CustomizableDashboard;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AnalyticsDashboard from './AnalyticsDashboard';
import CustomizableDashboard from './CustomizableDashboard';
import './App.css';

function App() {
  return (
    <div className="App">
      <AnalyticsDashboard />
      <CustomizableDashboard />
    </div>
  );
}

export default App;

This example demonstrates:

Analytics dashboard
Multiple widgets
Drag and drop
Resizable widgets
Layout persistence
Custom styling

Common Issues / Troubleshooting

Dashboard not displaying: Make sure you're importing Dashboard and Widget correctly from 'react-dazzle'. Check that the layout array is properly formatted.
Layout not updating: Use the onLayoutChange callback to update the layout state. The layout state must be controlled.
Widgets not draggable: Ensure the Dashboard component has proper dimensions and the layout is correctly configured.
Styling issues: Customize widget styles through inline styles or CSS. Each widget should have a defined height.
Responsive not working: Set the cols prop to control grid columns. Adjust rowHeight for different screen sizes.
Layout persistence: Save layout to localStorage or a backend. Load saved layout on component mount.

Next Steps

Now that you have an understanding of React Dazzle:

Explore all available widget types
Learn about advanced layout configurations
Add custom widgets
Implement layout templates
Create responsive dashboards
Learn about other dashboard libraries
Check the official repository: https://github.com/Raathigesh/Dazzle

Summary

You've successfully set up React Dazzle in your React application and created customizable dashboards with drag-and-drop widgets, analytics displays, and layout persistence. React Dazzle provides a flexible solution for building interactive dashboards with minimal configuration.

SEO Keywords

react-dazzle
React dashboard
react-dazzle tutorial
React drag and drop dashboard
react-dazzle installation
React dashboard framework
react-dazzle example
React widget dashboard
react-dazzle setup
React customizable dashboard
react-dazzle widgets
React dashboard layout
react-dazzle grid
React dashboard component
react-dazzle getting started

DEV Community