@twocatmoon/react-template-helpers NPM

About The Project

React Template Helpers implements a control flow API inspired by Vue.js.

Conditional Rendering

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() 
}

Collection Rendering

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>
  ))
}

Built With

Installation

Install from NPM

npm i @twocatmoon/react-template-helpers

Include in your project

import { If, For } from '@twocatmoon/react-template-helpers'

Usage

Please refer to the Documentation

Contributing

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!