Declarative Conditional Rendering in React

As React developers we are used to imperative conditional rendering; it’s fun. But I ponder, what if we have a way to declaratively define conditional rendering.

Hence, was born (npm registry: @openbytes/ts-react-directives). A tiny ReactJS library for the same.

While the original code was coneived over a decade ago in pure JavaScript and prop-types. I have moved it to TypeScript and is now avaialble as a npm library.

1. Declarative — branching & iterator logic.
2. Opt-in error reporting.
3. Avoid ternary soup.
4. Auto key generation etc.

The above examples are cut down (in code) for brevity.

Get Dulan Padma Sudasinghe’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

There is more information on the GitHub repo and the demo page. You can go through the DEVELOPER.md and README.md for more information, such as, how to install, use, and dependecies.

Links:

GitHub: skycodr/ts-react-directives: A runtime declarative, control structure, library for react.

Demo: https://skycodr.github.io/ts-react-directives/

Find me on: https://www.linkedin.com/in/dulan

#react #delcarative-rendering #conditional-rendering #typescript #rendering