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

• React.js
• TypeScript
• Vite
• TypeDoc

Installation

1. Install from NPM

   npm i @twocatmoon/react-template-helpers

2. 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!

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

License

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

Contact

Twitter - @twocatmoon

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

Acknowledgments

• Best-README-Template