A collection of react components that iterates over the each prop and renders the render prop. Demo
const users = [{ name: 'Victor 😎', age: 10 }]
<For each={users} render={
({ name, age }) => <p>{ name }, { age }</p>
}/>You can use npm/yarn to install
npm install react-listable<For
each={state.users}
loader={() => <div>loading</div>}
render={
({ name, age }) => <p>{ name }, { age }</p>
}/><Ul
className="list"
each={state.users}
setActive={({ name }) => name === 'Maria 🙍'}
render={
({ name, age }) => <p>{ name }, { age }</p>
}/><Ol
className="list"
each={state.users}
render={
({ name, age }) => <p>{ name }, { age }</p>
}/>See the full documentation and live examples at https://victorvoid.me/react-listable
The code is available under the MIT License.