@nappr/nappr-todolist

🍰 NAPPR TodoList

Full Documentation

Install

yarn add @nappr/nappr-todolist

Required Dependencies

• react-jss^10.0.4

Usage

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { v1 as uuidv1 } from 'uuid';
import NapprTodoList from '@nappr/nappr-todolist';

const ikea = require('ikea-name-generator');

function App({ items }) {
  const [tasks, updateTasks] = useState(items);
  return (
    <div className="app">
      <div style={{ height: 200 }}>
        <NapprTodoList
          onChange={(clickedTaskId, clickedtaskCheckValue) => {
            const next = tasks.map(obj => {
              if (obj.id !== clickedTaskId) return obj;
              return { ...obj, checked: clickedtaskCheckValue };
            });
            updateTasks(next);
          }}
          tasks={tasks}
        />
      </div>
    </div>
  );
}

App.defaultProps = {
  items: [...Array(10).keys()].map(() => ({
    checked: false,
    id: uuidv1(),
    label: ikea.getName(),
  })),
};

App.propTypes = {
  items: PropTypes.arrayOf(PropTypes.shape()),
};

export default App;