react-listable

1.0.6 • Public • Published

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.

/react-listable/

    Package Sidebar

    Install

    npm i react-listable

    Weekly Downloads

    753

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    22.9 kB

    Total Files

    22

    Last publish

    Collaborators

    • victorvoid