React My Items

Available on NPM

This package provides you an editable list with options to add, remove or strike through items. Implement with a hook to use the data.

Installation

npm i react-my-items --save

Component

The component is <ReactList/>. Import into your file as such:
import ReactList from 'react-my-items

Props

The <ReactList/> component takes two state props established with a react hook.

• reactList - This is the current state of a react hook you establish
• setReactList - This is the function that updates the state from your hook

Styles

Included in the package is a CSS file. You can use your own styling. The source code has clear class names that you can investigate. For example, here are a few:

• react-list-items-container - div at top level
• react-list-items-table - table of items
• react-list-items-row - tr in the table
• react-list-items-btn - form button
• react-list-items-input - form input

Implementation Example

import React, { useState } from 'react';
//import package
import ReactList from 'react-my-items'
//import optional css (you can create your own)
import 'react-my-items/build/css/index.css';

function App() {
  //set up hook to use data for your needs
  //Can preset list in useState
  const [list, setList] = useState(['Milk', 'Bread', 'Doodles', 'Noodles'])
  
  // do something with your data
  const onBtnClick = () => {
    console.log(list)
  }

  //pass in the the hook as props
  //names are required
  return(
  <div>
      <ReactList reactList={list} setReactList={setList}/>
      <button onClick={onBtnClick}>Submit</button>
  </div>
  )
}

export default App;