README
React My Items
NPM
Available onThis 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 establishsetReactList
- 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 levelreact-list-items-table
- table of itemsreact-list-items-row
- tr in the tablereact-list-items-btn
- form buttonreact-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;
Demo
If you would like to see a demo go to https://bvmcode.github.io/react-my-items-demo/