@bryntum/taskboard-react

v7.2.2

Published

10 days ago

React wrappers for Bryntum TaskBoard JavaScript component

0High
0Medium
0Low

mats.bryntse

rasmus.ersmarker

bryntum taskboard react wrapper

React wrapper for Bryntum TaskBoard

This package contains a wrapper that encapsulates Bryntum TaskBoard and turns it into a React component, exposing configuration options, properties, features, and events.

Version Requirement

React: 18 or higher
TypeScript: 4.2 or higher
Vite 5 or higher

Package Contents

| Path | Description | |---------------|------------------------------------------------| | lib/ | React wrapper components (BryntumTaskBoard etc.) | | src/ | Original source files |

Installation

React Wrapper

npm install @bryntum/taskboard-react@latest

Component Package (Required)

npm install @bryntum/taskboard@latest

Try Bryntum Online Demos

View Online React Demos

Quick Start

Replace your App.tsx with the following:

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;

Create a TaskBoardConfig.ts file in the src/ directory with the following content:

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
    }

};

Create a public/data/data.json file for example data and add the following JSON data to it:

{
  "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 }
    ]
  }
}

This is the data the Bryntum TaskBoard will use.

Lastly, add some styling to your App.css or index.css:

/* FontAwesome is used for icons */
@import '@bryntum/taskboard/fontawesome/css/fontawesome.css';
@import '@bryntum/taskboard/fontawesome/css/solid.css';
/* Structural CSS */
@import "@bryntum/taskboard/taskboard.css";
/* Bryntum theme of your choice */
@import "@bryntum/taskboard/svalbard-light.css";

Integration Guide

For details on installing and using this package, see the React Integration Guide.

Wrappers

React wrappers encapsulate Bryntum components as native React components, exposing all configuration options, properties, features, and events through React-familiar patterns like props and callbacks.

Visit Wrappers documentation for the complete list of available wrapper components.

Features

Features are optional modules that extend Bryntum TaskBoard functionality. Each feature is suffixed with Feature and can be enabled and configured through standard React props.

Visit Features documentation for the complete list of available features and their configuration options.

Explore All Bryntum Products

Bryntum Grid - High-performance data grid
Bryntum Scheduler - Resource scheduling component
Bryntum Scheduler Pro - Advanced scheduling with dependencies
Bryntum Gantt - Project planning and management
Bryntum Calendar - Full-featured calendar component
Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |

Online references

License and copyright

This wrapper depends on Bryntum TaskBoard, which is commercial software and requires a paid license. Please visit the Bryntum TaskBoard End User License for the full text of the license.