react-list-editable

A React component to render editable lists

Installation and Usage

The easiest way to use react-list-editable is to install it from npm and build it into your app with Webpack.

npm i react-list-editable

The use it in your app:

Import this component in your app using :

import EditableList from 'react-list-editable';

Don't forget to import the styles as well: ⚠️

import 'react-list-editable/lib/react-list-editable.css';

See below for an extended example:

import React, { Component } from 'react';
 
import EditableList from 'react-list-editable';
import 'react-list-editable/lib/react-list-editable.css';
 
export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['🥳 Partying', '👩🏻‍🎨 Painting', '🛌🏻 Sleeping']
    };
  }
  
  onListChange(newList) {
    this.setState({
      list: newList
    });
  }
  
  render() {
    return (
      <div className='app-container'>
        <EditableList
          list={this.state.list}
          onListChange={this.onListChange.bind(this)}
          placeholder='Enter a value'
        />
      </div>
    );
  }
}
 

Props

You have to pass the following props to this component:

• list - The list of elements to edit. This is a required prop, otherwise what will you edit in the editable list ? 🤷🏻‍♂️
• onListChange - A function which, on any updation of the list , will recieve the updated list as an argument.
• placeholder - The placeholder to show in the field for adding a new element to a list.

Demo

You can see this component in action here. The code for this demo can be found in the demo folder of this repository.

Codesandbox

Thanks

• Contributions are welcome
• Questions? Ask away @arpitbatra123 on twitter.
• The component is built using webpack, the demo using parcel and is hosted on Netlify. A big ❤️ to these projects