25

GitHub - leebyron/react-loops: React Loops works with React Hooks as part of the...

 5 years ago
source link: https://github.com/leebyron/react-loops
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

hook-and-loop.gif

React Loops — React Velcro Architecture

Build Status

React Loops work alongside React Hooks as part of the novel React Velcro architecture for building sticky, secure user interfaces that don't come apart under pressure.

Get started with Velcro by installing React Loops!

yarn add react-loops

For Loops

Use the props of to provide the list and as to provide an element for each item in the list. The of prop accepts Arrays, Array-likes, and Iterables.

<ul>
  <For of={myList} as={item =>
    <li>{item}</li>
  }/>
</ul>

Or provide a "render prop" function as a child.

<ul>
  <For of={myList}>
    {item =>
      <li>{item}</li>
    }
  </For>
</ul>

Access additional information about each iteration by destructuring the second argument:

  • index: A number from 0 to the length of the list
  • length: The length of the list
  • key: The key for this item in the list. Same as index for Arrays but string properties for in Objects
  • isFirst: True for the first iteration
  • isLast: True for the last iteration
<ul>
  <For of={myList} as={(item, { isLast }) =>
    <li><If test={isLast}>and </If>{item}</li>
  }/>
</ul>

For in Loops

Use the prop in to provide an Object instead of an Array or Iterable.

<ul>
  <For in={myObj} as={(item, {key}) =>
    <li>{key}: {item}</li>
  }/>
</ul>

React Keys

Provide key on each child to ensure correct behavior if the list may be reordered over time. If you don't provide key, the key of each iteration will be used by default.

<ul>
  <For of={myList} as={item =>
    <li key={item.id}>{item.label}</li>
  }/>
</ul>

If conditions

Use the test prop with <If> and <ElseIf> elements to conditionally include certain elements. When an <If> test is truthy it does not render any <ElseIf> or <Else> children. However when it is falsey it only renders <ElseIf> and <Else> children.

<If test={someCondition}>
  This will only be shown if someCondition is truthy.
  <ElseIf test={otherCondition}>
    This will only be shown if someCondition is falsey
    and otherCondition is truthy.
    <Else>
      This will only be shown if both someCondition and
      otherCondition are both falsey.
    </Else>
  </ElseIf>
  <Else>
    This will be shown if someCondition is falsey.
    <If test={finalCondition}>
      This will be shown if someCondition is falsey
      and finalCondition is truthy.
    </If>
  </Else>
</If>

Alternatively, you can provide then and else props.

<If
  test={someCondition}
  then={"This will only be shown if someCondition is truthy."}
  else={"This will be shown if someCondition is falsey."}
/>

What is React Velcro?

Only the newest, coolest, most blazing fast React architecture out there!

React Hooks has been an exciting development in the evolution of React, but it felt like it was only half of the story. React Loops completes the gripping picture by providing React's missing control-flow operators via JSX elements.

Is this a Joke?

Take a look at this side by side with the old looping pattern and you tell me.

loops-vs-mapkeys.png


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK