@innet/for

 

This plugin helps if you need to loop over lists of data based on an array, Set, Map, etc.

Installation

npm

npm i @innet/for

yarn

yarn add @innet/for

Or just download a minified js file here

Using

Provide the plugin into the third argument of innet

import innet from 'innet'
import For from '@innet/for'
import App from './App.tsx'

innet({type: App}, undefined, {for: For})

Then just use it anywhere in the app.

<for of={['foo', 'bar', 'baz']}>
  {(value, index) => <div>#{index}: {value}</div>}
</for>

Index

You can get index of an element by the second argument.

<for of={['foo', 'bar', 'baz']}>
  {(value, index) => <div>#{index}: {value}</div>}
</for>

Key

You can use key attribute to bind HTML element with the list item.

<for of={[{_id: 1}, {_id: 2}]} key='_id'>
  {(item, i) => <div>{i}: {item._id}</div>}
</for>

Or you can use a function to identify the item.

<for of={[{_id: 1}, {_id: 2}]} key={item => item._id}>
  {(item, i) => <div>{i}: {item._id}</div>}
</for>

Else

You can show something when the list is empty.

<for of={[]}>
  {() => <div>The function will not run</div>}
  This text is shown 'cause of the array is empty.
  <p>
    Any children after the first function is shown!
  </p>
</for>

Size

You can limit the list by size property.

<for of={['foo', 'bar', 'baz']} size={2}>
  {item => <div>{item}</div>}
</for>

The property can be a function to react on a state changes.

State

You can use state of list to react on the changes.

const data = new State(['foo'])

innet((
  <for of={() => data.value}>
    {(item, i) => <div>{i}: {item}</div>}
  </for>
), undefined, {for: For})

data.value.push('bar')
data.update()

Issues

If you find a bug or have a suggestion, please file an issue on GitHub.