react-loops
v1.3.0TypeScript
React Loops work with React Hooks as part of the React Velcro architecture
0/weekUpdated 3 years agoMITUnpacked: 16.9 KB
Published by leebyron
npm install react-loops
React Loops — _React Velcro Architecture_
 
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!
Install with yarn or npm.
``sh`
yarn add react-loops
And import into your Javascript.
`js`
import { For } from 'react-loops'
React Loops comes ready with both Flow and TypeScript types for high quality
integration into codebases that use these tools.
For-of Loops
Use the props of to provide the list and as to provide an element forof
each item in the list. The prop accepts Arrays, Array-likes,Map
and Iterables (such as [], [Set], and [Immutable.js]).
[Map]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/MapSet
[]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
[Immutable.js]: https://immutable-js.github.io/immutable-js/
`js
import { For } from 'react-loops'
function Bulleted({ list }) {
return (
- {item}
}/>
)
}
`
Or provide a "render prop" function as a child.
js
import { For } from 'react-loops'function Bulleted({ list }) {
return (
{item =>
- {item}
}
)
}
`For-in Loops
Use the prop
to provide an Object instead of an Array or Iterable.`js
import { For } from 'react-loops'function BulletedDefinitions({ terms }) {
return (
- {key}: {item}
}/>
)
}
`Loop empty conditions
A common pattern when rendering a collection is to render a special case when
the collection is empty. Optionally provide an
prop to handle this
case for both and loops.The
ifEmpty prop accepts anything renderable (strings, numbers, JSX) or a
function which returns anything renderable.`js
import { For } from 'react-loops'function BulletedWithFallback({ list }) {
return (
Nothing here!}>
{item =>
- {item}
}
)
}
`Loop iteration metadata
Access additional information about each iteration by destructuring the
second callback argument:
-
: 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 Object properties for in loops
- isFirst: True for the first iteration
- isLast: True for the last iteration`js
import { For } from 'react-loops'function BulletedSentence({ list }) {
return (
- {isLast && "and "}{item}
}/>
)
}
`React Keys & Reorderable Collections
React Loops provides a
prop automatically on each child by default (by
using the { key } loop iteration metadata). This is a great default if your
collection will not later reorder and an ergonomic improvement over your trained muscle memory of adding key={i} to every list.map() return value.However, reorderable collections should still directly provide the
key prop on
the element returned from the loop callback. Read more about Lists and Keys in the React documentation.`js
import { For } from 'react-loops'function BulletedReorderable({ list }) {
return (
- {item.label}
}/>
)
}
`
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.
The _React Velcro_ architecture was announced by @leebyron on April 1st, 2019.
$3
Take a look at this side by side with the old looping pattern and you tell me (hint).
$3
Yes, React Loops is directly inspired by Angular and Vue. It's also directly
inspired by older XML component syntax like XSLT, JSTL, and E4X. These
technologies all have their drawbacks, however we should not abandon all aspects
of these ideas.
React Loops are not an anti-pattern.
is not an anti-pattern
despite the existence of the for..of loop and neither is . React
Loops follows React's model of components as encapsulation of behavior and
state. It uses the "render prop" pattern, like
react-router's component, itself reminiscent of XSLT.React considers Angular (and Vue) directives as anti-patterns not because
they emulate loops or control flow. It is because they affect _scope_ in ways
that removes the ability to use plain Javascript, requires a template
language, and makes using other tools like ESLint difficult. They also are
implemented as attributes (props) on any element which complicates type-checking
and implementation.
React Loops avoids these drawbacks by providing
as a specific component
with a clear signature and callback functions to produce each element for clear,
"just Javascript," scoping rules avoiding the need for template languages or
additional compilation.Try React Loops in your project, you just might like it!
$3
_Yes_
* babel-plugin-jsx-control-statements is a Babel plugin with many control statements.
> Its
component suffers from some of the problems described above, _caveat emptor_.
* react-condition contains the old , , and statements from this library, as well as some new ones such as , , and .
* react-for is a predecessor and a very similar idea which includes other variants of loops.
* react-listable is a predecessor of this idea which includes and components.Contributing & License
Contributions are welcome from all who follow the community
code of conduct.
1. Fork this repository
2.
yarn install
3. Make your change in a branch
4. Ensure your change includes any relevant tests, type definitions
(TypeScript and Flow), and documentation.
5. 6. Create a pull request
$3
Copyright 2019 Lee Byron
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.