https://github.com/cesarparra/react-editable-list

React component for a TODO style list.
https://github.com/cesarparra/react-editable-list

react reactjs

Last synced: 3 months ago
JSON representation

React component for a TODO style list.

• Host: GitHub
• URL: https://github.com/cesarparra/react-editable-list
• Owner: cesarParra
• License: mit
• Created: 2018-07-21T12:00:51.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-18T21:49:05.000Z (almost 8 years ago)
• Last Synced: 2026-03-31T13:42:26.114Z (4 months ago)
• Topics: react, reactjs
• Language: JavaScript
• Homepage:
• Size: 33.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# react-editable-list

[![npm package][npm-badge]][npm]

[![Coveralls][coveralls-badge]][coveralls]

React component for an editable list.

[npm-badge]: https://badge.fury.io/js/react-editable-list-component.svg

[npm]: https://www.npmjs.org/package/react-editable-list-component

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square

[coveralls]: https://coveralls.io/github/user/repo

[npm package](https://www.npmjs.com/package/react-editable-list-component)

React component that allows you to create editable lists in the style of TODO lists.

## Installation

`$ npm i --save react-editable-list-component`

## Usage

You can use the component like this:

    

The title prop allows you to specify the title your list will have and the itemPlaceholder allows you to specify the character you want for the placeholder of a blank line in the list.

### Load default items

You can also specify a list of items you want the component to load with:

    

### Subscribe to changes in the list

You can use the onChange prop to pass a function to get the always up to date data from the list:

    

An object representing the latest information will be passed every time the items in the list or the title changes:

 

    onChange(latestInfo) {

        // { listItems: [{id: "4440a6bc-cceb-4906-9538-2b01a3059a01", text: "Test1"}

        //              {id: "26a42e91-95f9-4e35-bf7f-b2511338766d", text: "Test2"}]

        // title: "Demo" }

        console.log('Latest information in the component', latestInfo);

    }