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

(back to top)

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

(back to top)

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

(back to top)

• React.js
• TypeScript
• Vite
• TypeDoc

(back to top)

1. Install from NPM

   npm i @twocatmoon/react-template-helpers

2. Include in your project

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

(back to top)

Please refer to the Documentation

(back to top)

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Twitter - @twocatmoon

Project Link - https://github.com/twocatmoon/react-template-helpers

(back to top)

• Best-README-Template

(back to top)