https://github.com/twocatmoon/react-template-helpers
Branching and iterative logic helpers for React, to help make your templates cleaner.
https://github.com/twocatmoon/react-template-helpers
branching control-flow enumerable for if iterative react
Last synced: about 2 months ago
JSON representation
Branching and iterative logic helpers for React, to help make your templates cleaner.
- Host: GitHub
- URL: https://github.com/twocatmoon/react-template-helpers
- Owner: twocatmoon
- License: mit
- Created: 2022-03-11T18:25:07.000Z (over 4 years ago)
- Default Branch: trunk
- Last Pushed: 2022-07-19T20:11:08.000Z (almost 4 years ago)
- Last Synced: 2025-10-24T08:56:09.356Z (8 months ago)
- Topics: branching, control-flow, enumerable, for, if, iterative, react
- Language: TypeScript
- Homepage: https://github.com/twocatmoon/react-template-helpers
- Size: 734 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
React Template Helpers
Branching and iterative logic helpers for React, to help make your templates cleaner.
Explore the docs »
Report Bug
·
Request Feature
Table of Contents
## 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.
```tsx
{
If(condition, () => (
Hello, world!
)).EndIf()
}
```
It is also possible to add an “else block” with `ElseIf` and `Else`:
```tsx
{
If(condition, () => (
Hello, world!
))
.ElseIf(otherCondition, () => (Hello, again!
))
.Else(() => (Goodbye.
))
.EndIf()
}
```
### Collection Rendering
Use the `For` function to render a collection of items, like an array:
```tsx
{
For([1, 2, 3], (item, i) => (
{item}
))
}
```
When using `For` with an array, you can get additional context about the current item's place in the array:
```tsx
{
For([1, 2, 3], (item, i, { isFirst, isLast, isEven, isNth }) => (
{item}
))
}
```
You can also use `For` with objects, although the output order is not guaranteed, and additional context about the item is not available:
```tsx
{
For({ a: 1, b: 2, c: 3 }, (item, key) => (
{item}
))
}
```
### Built With
* [React.js](https://reactjs.org/)
* [TypeScript](https://www.typescriptlang.org/)
* [Vite](https://vitejs.dev/)
* [TypeDoc](https://typedoc.org/)
## Installation
1. Install from NPM
```sh
npm i @twocatmoon/react-template-helpers
```
2. Include in your project
```ts
import { If, For } from '@twocatmoon/react-template-helpers'
```
## Usage
_Please refer to the [Documentation](https://twocatmoon.github.io/react-template-helpers)_
## 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](https://twitter.com/twocatmoon)
Project Link - [https://github.com/twocatmoon/react-template-helpers](https://github.com/twocatmoon/react-template-helpers)
## Acknowledgments
* [Best-README-Template](https://github.com/othneildrew/Best-README-Template)
[contributors-shield]: https://img.shields.io/github/contributors/twocatmoon/react-template-helpers.svg?style=for-the-badge
[contributors-url]: https://github.com/twocatmoon/react-template-helpers/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/twocatmoon/react-template-helpers.svg?style=for-the-badge
[forks-url]: https://github.com/twocatmoon/react-template-helpers/network/members
[stars-shield]: https://img.shields.io/github/stars/twocatmoon/react-template-helpers.svg?style=for-the-badge
[stars-url]: https://github.com/twocatmoon/react-template-helpers/stargazers
[issues-shield]: https://img.shields.io/github/issues/twocatmoon/react-template-helpers.svg?style=for-the-badge
[issues-url]: https://github.com/twocatmoon/react-template-helpers/issues
[license-shield]: https://img.shields.io/github/license/twocatmoon/react-template-helpers.svg?style=for-the-badge
[license-url]: https://github.com/twocatmoon/react-template-helpers/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555