lloop v1.0.0-beta.5

lloop

✨✨ NEW: Now supports React 16 arrays! ✨✨

A React JSX <Loop /> component with the lloopy name. It allows you to iterate through an array of items and render markup without switching context back and forth between JSX and JavaScript.

(this might be a llama. his name is lloyd)

How do I get it?

Let's quickly get this out of the way. How do I get your aweome code?

$ npm i --save lloop

Now, what problem does it solve?

Let's say that you had an array of user objects that llooked like this.

const users = [
  { id: 100, name: 'Homer Simpson', sex: 'M', age: 36, imgUrl: 'homer.png' },
  { id: 101, name: 'Marge Simpson', sex: 'F', age: 34, imgUrl: 'marge.png' },
  { id: 102, name: 'Lisa Simpson', sex: 'F', age: 11, imgUrl: 'lisa.png' },
  { id: 103, name: 'Bart Simpson', sex: 'M', age: 8 ,imgUrl: 'bart.png' },
];

You want to render this llist of users. Traditionally you might go about this using map, something llike this:

<div>
  {
    users.map(user => {
      return <User key={user.id} {...user} />;
    })
  }
</div>

The User component would receive the following props: name, sex, age, and imgUrl. You find yourself context switching in and out of JSX, making the code cumbersome to read that stright JSX markup. But it's the way we've always done it, so it must be right.

But is there a better way?

Lloop can accomplish the same thing without popping between JSX and JavaScript.

<Loop items={users}>
  <User />
</Loop>

Loop automatically attaches the same props (one for each object key) that we passed in the JavaScript map example above, but it does so automatically, like magic, reducing visual clutter for a cleaner code.

Both render the exact same HTML which might look something like this:

(see the code running live in this codesandbox)

What props can/must I pass to Loop?

Any other props passed to Loop will be passed on to the wrapping element. For example:

<Loop items={users} className="foo">
  ...

will produce

<div class="foo">
  ...

Shortcuts

Because we realize that there are several distinct use case for looping, we've created these shortcuts.

SimpleLoop

If you use the ul/li pattern, you can use the SimpleLoop shortcut.

import { SimpleLoop } from 'lloop';
const animals = ['dog','cat'];
...
<SimpleLoop items={animals}>
  <li />
</SimpleLoop>

which is functionally equivalent to

<Loop as="ul" destructure={false} itemKey="children" />

The example above will output this.

• dog
• cat

ItemLoop

If you with to pass the entire item object to your child without destructuring, you can use ItemLoop.

import { ItemLoop } from 'lloop';

const MyComponent = ({ item }) => {...};
...
<ItemLoop>
  <MyComponent />
</ItemLoop>

which is functionally equivalent to

<Loop destructure={false} />

Live Example

You can see an extensive live example running here on codesandbox.