https://github.com/repetitioestmaterstudiorum/dynamic-list-react
React component to render a list of input items that can be added to, updated and removed from without any buttons.
https://github.com/repetitioestmaterstudiorum/dynamic-list-react
dynamiclist nomodes react
Last synced: about 1 month ago
JSON representation
React component to render a list of input items that can be added to, updated and removed from without any buttons.
- Host: GitHub
- URL: https://github.com/repetitioestmaterstudiorum/dynamic-list-react
- Owner: repetitioestmaterstudiorum
- Created: 2023-09-07T12:12:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-08T13:32:35.000Z (over 2 years ago)
- Last Synced: 2025-08-09T05:02:56.792Z (10 months ago)
- Topics: dynamiclist, nomodes, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/dynamic-list-react
- Size: 1.43 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dynamic-list-react
Inspired by Larry Tesler's work, this package contains a react component to render a list of input items that can be added to, updated and removed from without switching between edit and view modes and without any buttons (optionally, a delete button can be shown for each item).
## Installation
`npm install dynamic-list-react`
## Usage
### Basic Example
```javascript
import React from 'react';
import { DynamicList, type HandleInputChange } from 'dynamic-list-react';
export function ExampleDynamicList() {
const data = getCurrentData();
const defaultItem = { name: '' };
const updateKeyValue = (_id: string, key: string, value: any) => {
const currentData = getCurrentData();
const itemToUpdate = currentData.find(item => item._id === _id);
if (itemToUpdate) {
itemToUpdate[key] = value;
setData(currentData);
}
}
const removeItem = (_id: string) => {
const currentData = getCurrentData();
setData(currentData.filter(item => item._id !== _id));
}
const addItem = (item: ItemType) => {
const currentData = getCurrentData();
setData(currentData.concat(item));
}
const InputComponent = (item: ItemType, handleInputChange: HandleInputChange) => (
handleInputChange(item._id, 'name', e.target.value)}
/>
);
return (
renderComponent={InputComponent}
dataProp={data}
addItem={addItem}
updateKeyValue={updateKeyValue}
removeItem={removeItem}
defaultItem={defaultItem}
/>
);
}
function getCurrentData() {
return JSON.parse(localStorage.getItem('storageKey') || '[]') as ItemType[];
}
function setData(data: ItemType[]) {
localStorage.setItem('storageKey', JSON.stringify(data));
}
type ItemType = Record;
```
### Advanced Example
```javascript
import React from 'react'
import { DynamicList, type HandleDelete, type HandleInputChange } from 'dynamic-list-react'
export function ExampleDynamicList() {
const data = getCurrentData()
const defaultItem = {
firstName: '',
lastName: '',
score: '',
}
const updateKeyValue = (_id: string, key: string, value: any) => {
const currentData = getCurrentData()
const itemToUpdate = currentData.find((item) => item._id === _id)
if (itemToUpdate) {
itemToUpdate[key] = value
setData(currentData)
}
}
const removeItem = (_id: string) => {
const currentData = getCurrentData()
setData(currentData.filter((item) => item._id !== _id))
}
const addItem = (item: ItemType) => {
const currentData = getCurrentData()
setData(currentData.concat(item))
}
const InputComponent = (
item: ItemType,
handleInputChange: HandleInputChange,
handleDelete: HandleDelete,
isLastItem: boolean,
idx: number
) => (
Item {idx + 1}
handleInputChange(item._id, 'firstName', e.target.value)}
/>
handleInputChange(item._id, 'lastName', e.target.value)}
/>
handleInputChange(item._id, 'score', e.target.value)}
/>
{isLastItem ? null : handleDelete(item._id)}>Delete}
)
return (
renderComponent={InputComponent}
dataProp={data}
addItem={addItem}
updateKeyValue={updateKeyValue}
removeItem={removeItem}
defaultItem={defaultItem}
getRandomId={getRandomId}
/>
)
}
function getCurrentData() {
return JSON.parse(localStorage.getItem('storageKey') || '[]') as ItemType[]
}
function setData(data: ItemType[]) {
localStorage.setItem('storageKey', JSON.stringify(data))
}
function getRandomId() {
// e.g. crypto.randomUUID() or uuidv4()
return Date.now().toString()
}
type ItemType = Record
```
## Larry Tesler: No Modes
> One of Mr Tesler's firmest beliefs was that computer systems should stop using "modes", which were common in software design at the time.
> Modes allow users to switch between functions on software and apps but make computers both time-consuming and complicated.
> So strong was this belief that Mr Tesler's website was called "nomodes.com", his Twitter handle was "@nomodes", and even his car's registration plate was "No Modes".
Source: https://www.bbc.com/news/world-us-canada-51567695