react-listable

A collection of react components that iterates over the each prop and renders the render prop. Demo

Overview

const users = [{ name: 'Victor 😎', age: 10 }]
<For each={users} render={
  ({ name, age }) => <p>{ name }, { age }</p>
}/>

Installation

You can use npm/yarn to install

npm install react-listable

Documentation

For

<For 
  each={state.users} 
  loader={() => <div>loading</div>}
  render={
    ({ name, age }) => <p>{ name }, { age }</p>
  }/>

Ul

<Ul 
  className="list"
  each={state.users} 
  setActive={({ name }) => name === 'Maria 🙍'}
  render={
    ({ name, age }) => <p>{ name }, { age }</p>
  }/>

Ol

<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

License

The code is available under the MIT License.