Branching and iterative logic helpers for React, to help make your templates cleaner.
Explore the docs »
Report Bug
·
Request Feature
Table of Contents
React Template Helpers implements a control flow API inspired by Vue.js.
Use the If
function to conditionally render a block. The block will only be rendered if the condition returns a truthy value.
{
If(condition, () => (<h1>Hello, world!</h1>)).EndIf()
}
It is also possible to add an “else block” with ElseIf
and Else
:
{
If(condition, () => (<h1>Hello, world!</h1>))
.ElseIf(otherCondition, () => (<h1>Hello, again!</h1>))
.Else(() => (<h1>Goodbye.</h1>))
.EndIf()
}
Use the For
function to render a collection of items, like an array:
{
For([1, 2, 3], (item, i) => (
<p key={i}>{item}</p>
))
}
When using For
with an array, you can get additional context about the current item's place in the array:
{
For([1, 2, 3], (item, i, { isFirst, isLast, isEven, isNth }) => (
<p key={i} className={isEven ? '--even' : '--odd'}>{item}</p>
))
}
You can also use For
with objects, although the output order is not guaranteed, and additional context about the item is not available:
{
For({ a: 1, b: 2, c: 3 }, (item, key) => (
<p key={key}>{item}</p>
))
}
- Install from NPM
npm i @twocatmoon/react-template-helpers
- Include in your project
import { If, For } from '@twocatmoon/react-template-helpers'
Please refer to the Documentation
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
Twitter - @twocatmoon
Project Link - https://github.com/twocatmoon/react-template-helpers