yarn add @nappr/nappr-todolist
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;