Quick start guide for React integration

Try React demos

Bryntum TaskBoard ships with several demo React applications that showcase its functionality. Each demo has been tested and confirmed to be compatible with Node.js 20.

Version requirements

Minimum supported:

• React: 16.0.0 or higher
• TypeScript: 3.6.0 or higher (for TypeScript application)
• Vite 4.0.0 or higher (for application build with Vite)

Recommended:

• React: 18.0.0 or higher
• TypeScript: 4.0.0 or higher (for TypeScript application)
• Vite 5.0.0 or higher (for application build with Vite)

Overview of React integration

This quick start guide will show you how to integrate Bryntum TaskBoard into your React applications.

To illustrate the integration process, we'll build a simple application that looks like the image below.

Here's a breakdown of the process we'll follow:

1. Access the Bryntum npm registry
2. Create a React application
3. Install the TaskBoard component
4. Add the component to the application
5. Apply styles
6. Run the application

Access to npm registry

You can try out Bryntum components for free using our public Bryntum trial packages. If you have a Bryntum license, please refer to our Npm Repository Guide to access the private Bryntum repository.

Create a React application

There are many ways to create and build React applications. In this guide, we’ll use the React Vite guide, which is known for its efficiency and performance benefits in development.

If you’re using JavaScript only (without TypeScript), enter the following command:

npm create vite@latest bryntum-taskboard-app -- --template react

Alternatively, if you prefer using TypeScript, use the following command:

npm create vite@latest bryntum-taskboard-app -- --template react-ts

You can replace bryntum-taskboard-app with your preferred application name.

After creating the template, install the Node.js modules:

cd bryntum-taskboard-app
npm install && npm install sass

Install the component

From your terminal, update project dependencies using the following commands:

npm install @bryntum/taskboard@npm:@bryntum/taskboard-trial@7.3.0 @bryntum/taskboard-react@7.3.0

npm install @bryntum/taskboard@7.3.0 @bryntum/taskboard-react@7.3.0

Managing dependencies and versions

The application configuration may add a caret (^) as a prefix to dependency versions. We recommend avoiding the caret character as a version prefix to maintain full control over upgrades.

Check the generated package.json file and, if necessary, replace dependencies and devDependencies with the following:

"dependencies": {
  "@bryntum/taskboard": "npm:@bryntum/taskboard-trial@7.3.0",
  "@bryntum/taskboard-react": "7.3.0",
  ...
},
...

"dependencies": {
  "@bryntum/taskboard": "7.3.0",
  "@bryntum/taskboard-react": "7.3.0",
  ...
},
...

Vite Configuration

If you're using Vite to run Bryntum TaskBoard in development mode, include the package in the optimizeDeps section of the vite.config.js file to prevent bundles from loading multiple times.

Find instructions for optimizing dependencies in Vite applications here.

Add the component to the application

First, create a configuration file in src. This file will contain the TaskBoard settings.

export const taskboardProps = {

    columns : [
        { id : 'todo', text : 'Todo', color : 'orange' },
        { id : 'doing', text : 'Doing', color : 'blue', tooltip : 'Items that are currently in progress' },
        { id : 'done', text : 'Done' }
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    project : {
        transport : {
            load : {
                url : 'data.json'
            }
        },
        autoLoad : true
    }

};

import { BryntumTaskBoardProps } from '@bryntum/taskboard-react';

export const taskboardProps: BryntumTaskBoardProps = {

    columns : [
        { id : 'todo', text : 'Todo', color : 'orange' },
        { id : 'doing', text : 'Doing', color : 'blue', tooltip : 'Items that are currently in progress' },
        { id : 'done', text : 'Done' }
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    project : {
        transport : {
            load : {
                url : 'data.json'
            }
        },
        autoLoad : true
    }

};

Add component data

Now add the following content to public/data.json.

{
  "success": true,
  "tasks": {
    "rows": [
      { "id": 1, "name": "Design landing page", "status": "doing", "description": "Creating layout for the new landing page" },
      { "id": 2, "name": "Set up database schema", "status": "todo",  "description": "Define tables and relationships for user data" },
      { "id": 3, "name": "Write API documentation", "status": "done",  "description": "Document the REST endpoints for the project" },
      { "id": 4, "name": "Create login screen", "status": "doing", "description": "Implement authentication UI with validation" },
      { "id": 5, "name": "Integrate payment gateway", "status": "todo",  "description": "Connect Stripe API to the backend" },
      { "id": 6, "name": "Fix navigation bugs", "status": "done",  "description": "Resolve reported issues with navbar links" },
      { "id": 7, "name": "Build notification system", "status": "doing", "description": "Real-time push notifications for events" },
      { "id": 8, "name": "Add unit tests", "status": "todo",  "description": "Write tests for services and components" },
      { "id": 9, "name": "Optimize image loading", "status": "done",  "description": "Implement lazy loading for large images" },
      { "id": 10, "name": "Deploy staging server", "status": "doing", "description": "Set up CI/CD pipeline for staging environment" },
      { "id": 11, "name": "Create user profile page", "status": "todo",  "description": "Design and implement profile management UI" },
      { "id": 12, "name": "Implement role-based access control", "status": "todo",  "description": "Restrict features based on user roles" },
      { "id": 13, "name": "Set up error logging", "status": "todo",  "description": "Integrate centralized error monitoring tool" },
      { "id": 14, "name": "Improve form validation", "status": "todo",  "description": "Enhance validation rules for all forms" },
      { "id": 15, "name": "Add search functionality", "status": "todo",  "description": "Implement search bar with filtering options" }
    ]
  },
  "resources": {
    "rows": [
      { "id": 1, "name": "Angelo"  },
      { "id": 2, "name": "Celia"   },
      { "id": 3, "name": "Dave"    },
      { "id": 4, "name": "Emilia"  },
      { "id": 5, "name": "Gloria"  },
      { "id": 6, "name": "Henrik"  },
      { "id": 7, "name": "Kate"    }
    ]
  },
  "assignments": {
    "rows": [
      { "id": 1, "event": 1, "resource": 1 },
      { "id": 2, "event": 2, "resource": 2 },
      { "id": 3, "event": 3, "resource": 3 },
      { "id": 4, "event": 4, "resource": 4 },
      { "id": 5, "event": 5, "resource": 5 },
      { "id": 6, "event": 6, "resource": 6 },
      { "id": 7, "event": 7, "resource": 7 },
      { "id": 8, "event": 8, "resource": 1 },
      { "id": 9, "event": 9, "resource": 2 },
      { "id": 10, "event": 10, "resource": 3 },
      { "id": 11, "event": 11, "resource": 4 },
      { "id": 12, "event": 12, "resource": 5 },
      { "id": 13, "event": 1, "resource": 5 },
      { "id": 14, "event": 2, "resource": 5 },
      { "id": 15, "event": 3, "resource": 5 },
      { "id": 16, "event": 4, "resource": 5 },
      { "id": 17, "event": 6, "resource": 5 },
      { "id": 18, "event": 7, "resource": 5 }
    ]
  }
}

Next, replace the code in the App.jsx or App.tsx file with the following:

import { BryntumTaskBoard } from '@bryntum/taskboard-react';
import { taskboardProps } from './TaskBoardConfig';
import './App.scss';

function App() {
    return (
        <BryntumTaskBoard {...taskboardProps} />
    );
}

export default App;

import { FunctionComponent, useRef } from 'react';
import { BryntumTaskBoard } from '@bryntum/taskboard-react';
import { taskboardProps } from './TaskBoardConfig';
import './App.scss';

const App: FunctionComponent = () => {

    const taskboard = useRef<BryntumTaskBoard>(null);

    return (
        <BryntumTaskBoard
            ref = {taskboard}
            {...taskboardProps}
        />
    );
};

export default App;

If you plan to use stateful React collections for data binding, please refer to this guide.

Apply styles

Now you can apply styles to the Bryntum TaskBoard component.

First, delete the index.css file and remove its import from the main.jsx or main.tsx. This will ensure that no unintended styles are applied.

Next, rename App.css to App.scss and replace its contents with the following:

// FontAwesome is used for icons
@import "@bryntum/taskboard/fontawesome/css/fontawesome.css";
@import "@bryntum/taskboard/fontawesome/css/solid.css";
// Import taskboard's structural CSS
@import "@bryntum/taskboard/taskboard.css";
// Import your preferred Bryntum theme
@import "@bryntum/taskboard/svalbard-light.css";

// Giving our taskboard some height
#root {
  height: 100vh;
}

This stylesheet imports the Bryntum TaskBoard structural CSS, the Svalbard theme, and gives the page a two-panel layout, with the scheduler above the utilization view. Bryntum provides five themes with light and dark variants that can be customized.

Learn more about styling your Bryntum TaskBoard in our style guide.

Run the application

Start the application development server:

npm run dev

You can now access the application in your browser at http://localhost:5173.

Troubleshooting

If you run into issues while setting up your Bryntum TaskBoard component, refer to our troubleshooting guide for Bryntum TaskBoard with React.

What to do next?

Make the most of Bryntum TaskBoard in your application by learning more about advanced customization options and data management techniques.

Advanced integration with React

Explore our comprehensive React guide to learn more about how Bryntum TaskBoard integrates with React and start customizing your application.

Working with data in Bryntum TaskBoard

Our guide to data binding explains how data can be bound to the component.

Bryntum components often use multiple data collections and entities.

For a detailed explanation of how these elements interact, see our guide to tasks in Bryntum TaskBoard.