Skip to content

Dash React Components

Jump to bottom
Bradley Erickson edited this page Apr 28, 2023 · 2 revisions

Building and Using Components in Dashboards

In Learning Observer, we create React components and generate a Python package for them to be used with the Dash framework. These components are housed in the lo_dash_react_components module and enable the creation of highly customizable dashboards. This document guides you through the component development process, the build process, and using the components in your dashboards.

Requirements

A downstream dependency in the build process may cause breaking behavior depending on your node version. The latest version of Node v16 (tested on v16.19.1) should work fine; however, we've noticed errors on Node v18.

If you already have v18 on your system, install nvm: Node Version Manager. When running nvm commands within the project without specifying a specific version, it will automatically look for the version defined in the .nvmrc file in the root directory.

To install and activate the node version, run:

nvm install
nvm use

Any npm command will now use Node v16.

Component Development

  1. Create a React component file with the .react.js extension in the src/lib/components directory. Use a class structure instead of a function definition due to a limitation in the Dash auto-generation process.
  2. For component-specific CSS, create a file with the same name and .scss extension in the src/lib/components directory.
  3. After the components are generated, package them using the build:python command.

Build Process

The build process provides various commands to build specific pieces or watch sets of files for changes, triggering auto-rebuilds. This includes converting SCSS files using SASS and building React to Dash Python packages.

Here are some useful NPM scripts for building components:

  • build:js: Builds JavaScript files using Webpack in production mode.
  • build:backends: Generates components in the lo_dash_react_components module.
  • build: Builds CSS, JS, and backends.
  • build-css: Converts SCSS files to CSS.
  • watch-css: Watches and automatically rebuilds SCSS files.
  • build:python: Cleans the dist/ and build/ directories and creates a Python distribution.

Using Components in Dashboards

To use the components in your dashboards, simply import the desired component from the lo_dash_react_components module and use them as you would any other Dash component.

Additional Information

For further details and development instructions, please refer to the original README in the Learning Observer Dash Components repository. It provides a comprehensive overview of the installation process, running the development environment, testing, creating a production build, and sharing your components.

If you encounter any ESLint errors blocking your app, follow the instructions provided in the Issues section of the README to disable handleWarnings.

Clone this wiki locally