https://github.com/sixertoy/nappr-todolist

🍰Nappr TodoList - A React TodoList Component
https://github.com/sixertoy/nappr-todolist

component react reactjs todo todolist

Last synced: 11 days ago
JSON representation

🍰Nappr TodoList - A React TodoList Component

• Host: GitHub
• URL: https://github.com/sixertoy/nappr-todolist
• Owner: sixertoy
• Created: 2020-02-13T17:25:04.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-07T21:23:28.000Z (over 1 year ago)
• Last Synced: 2024-12-21T20:37:19.894Z (about 1 month ago)
• Topics: component, react, reactjs, todo, todolist
• Language: JavaScript
• Homepage: https://sixertoy.github.io/nappr-todolist
• Size: 400 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🍰 NAPPR TodoList

[![NPM version][npm-version-img]][npm-url] [![Build][travis-img]][travis-url]

[**Full Documentation**](https://sixertoy.github.io/nappr-todolist/#/)

## Install

```bash

yarn add @nappr/nappr-todolist

```

#### Required Dependencies

- [react-jss^10.0.4](https://www.npmjs.com/package/react-jss)

## Usage

```javascript

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 (

    


      


         {

            const next = tasks.map(obj => {

              if (obj.id !== clickedTaskId) return obj;

              return { ...obj, checked: clickedtaskCheckValue };

            });

            updateTasks(next);

          }}

          tasks={tasks}

        />

      

    

  );

}


App.defaultProps = {

  items: [...Array(10).keys()].map(() => ({

    checked: false,

    id: uuidv1(),

    label: ikea.getName(),

  })),

};

App.propTypes = {

  items: PropTypes.arrayOf(PropTypes.shape()),

};

export default App;

```

[travis-url]: https://travis-ci.org/sixertoy/nappr-todolist

[travis-img]: http://img.shields.io/travis/sixertoy/nappr-todolist.svg?style=flat-square

[npm-url]: https://www.npmjs.com/package/@nappr/nappr-todolist

[npm-version-img]: http://img.shields.io/npm/v/@nappr/nappr-todolist.svg?style=flat-square