https://github.com/d8corp/innet-for

innet plugin for effective rendering of iterable objects
https://github.com/d8corp/innet-for

Last synced: about 1 year ago
JSON representation

innet plugin for effective rendering of iterable objects

• Host: GitHub
• URL: https://github.com/d8corp/innet-for
• Owner: d8corp
• License: mit
• Created: 2021-01-05T13:51:51.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-06-16T22:49:28.000Z (about 5 years ago)
• Last Synced: 2025-03-21T09:03:58.020Z (over 1 year ago)
• Language: JavaScript
• Size: 195 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          


#   @innet/for

 

[![NPM](https://img.shields.io/npm/v/@innet/for.svg)](https://github.com/d8corp/innet-for/blob/main/CHANGELOG.md)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/@innet/for)](https://bundlephobia.com/result?p=@innet/for)

[![downloads](https://img.shields.io/npm/dm/@innet/for.svg)](https://www.npmjs.com/package/@innet/for)

[![license](https://img.shields.io/npm/l/@innet/for)](https://github.com/d8corp/innet-for/blob/main/LICENSE)  

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

[![stars](https://img.shields.io/github/stars/d8corp/innet-for?style=social)](https://github.com/d8corp/innet-for/stargazers)

[![watchers](https://img.shields.io/github/watchers/d8corp/innet-for?style=social)](https://github.com/d8corp/innet-for/watchers)

### Installation

npm

```bash

npm i @innet/for

```

yarn

```bash

yarn add @innet/for

```

Or just download a minified js file

[here](https://github.com/d8corp/innet-for/blob/main/lib/innet-for.min.js)

### Using

Provide the plugin into the third argument of [innet](https://www.npmjs.com/package/innet)

```typescript

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.

```typescript jsx

  {value => 
{value}
}


```

##### Index

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

```typescript jsx

  {(value, index) => 
#{index}: {value}
}


```

##### Key

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

```typescript jsx

  {(item, i) => 
{i}: {item._id}
}


```

Or you can use a function to identify the item.

```typescript jsx

 item._id}>

  {(item, i) => 
{i}: {item._id}
}


```

##### Else

You can show something when the list is empty.

```typescript jsx

  {() => 
The function will not run
}

  This text is shown 'cause of the array is empty.

  


    Any children after the first function is shown!

  


```

##### Size

You can limit the list by `size` property.

```typescript jsx

  {item => 
{item}
}


```

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

##### State

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

```typescript jsx

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

innet((

   data.value}>

    {(item, i) => 
{i}: {item}
}

  

), 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](https://github.com/d8corp/innet-for/issues).  

[![issues](https://img.shields.io/github/issues-raw/d8corp/innet-for)](https://github.com/d8corp/innet-for/issues)