react-each-of
v0.0.1
Published
A lightweight React library for effortlessly rendering lists, providing dynamic mapping over arrays with fallback support for empty states.
Downloads
2
Readme
react-each-of
A lightweight React library for effortlessly rendering lists, providing dynamic mapping over arrays with fallback support for empty states.
Installation
npm install react-each-of
Usage
import { Each } from "react-each-of";
interface Task {
id: number;
name: string;
}
const tasks: Task[] = [
{ id: 1, name: "Create Awesome Library" },
{ id: 2, name: "Publish Awesome Library to NPM" },
];
const TaskListItem = ({ task }: { task: Task }) => {
return (
<button onClick={() => alert(JSON.stringify(task))}>{task.name}</button>
);
};
function App() {
return (
<div>
<Each<Task>
of={tasks}
render={(task) => <TaskListItem key={task.id} task={task} />}
renderFallback={<span>No tasks found</span>}
/>
</div>
);
}
export default App;