React-beautiful-todo NPM

Task Hub

Installation

npm
i
@not/
published

Usage

import {Todos} from "@not/published";

Defining boards

const boards = [
    {
        board_id: '1',
        tasks: [
            {task_id: 1, name: 'Buy paint and supplies'},
        ]
    },
    {
        board_id: '2',
        tasks: [
            {task_id: 2, name: 'Prepare a presentation for the client'},
            {task_id: 3, name: 'Visit the supermarket'}
        ]
    }
]

Defining styles for boards

const styles = {
    '1': {border: '0px solid black', padding: '10px'},
    '2': {backgroundColor: '#3A4750'}
}

Defining renderers for boards

const renderers = {
    '1': {
        headerRenderer: CustomHeaderRenderer,
        addRenderer: CustomAddRenderer,
        taskRenderer: CustomTaskRenderer,
    }
}

Using Todos

<Todos
    boards={boards}
    styles={styles}
    renderers={renderers}
/>

Todos Props

Prop	Value
boards	Array of todoBoard type todoBoard = {board_id: string;tasks: task[];key: string: any; }
styles	type styles = {key: string: CSS.Properties;}
renderers	type renderer = {key: string: React.FunctionComponent;} type renderers = {key: string: renderer;}