React declarative control flow

React declarative flow is a library that aims to make React views more declarative, idiomatic, easy to read, and easy to write.

JSX is a declarative syntax to compose virtual-dom pieces of views. But, sometimes we need to put some logic down, for example, conditionally render components, or show them as a result of looping a list of values. JSX proposes either to create a new component/function to handle that logic, or intermix JS code inside the view.

This library takes advantage of React Higher Order Componets, and Render-Props pattern to make possible to write conditionals and loops in a more declarative way while reducing visual cluttering.

Lets write a simple table of products with two columns Name and In Stock. If In Stock is 0 then a message Out of Stock should be displayed. Currently we should write something like the following:

``tsx
function ProductTable({products}) {
return (









{renderTableBody(products)}


Name	In Stock

)
}

function renderTableBody(products) {
return (

{products.map((product) =>

{product.name}
{(product.inStock > 0)
? {product.inStock}
: Out of Stock
}

)}

)
}
`

With this library will turn the above code into:

`tsx
function ProductTable({products}) {
return (












0}
then={}
else={}
/>

}/>



Name	In Stock
{product.name}	{product.inStock}	Out of Stock


)
}
`

Install

`
// with yarn
yarn add react-declarative-flow

// with npm
npm install react-declarative-flow
`

If

Conditionally render components based on the truthy-ness of evaluating the test prop. Render then if test evaluates to truthy, render else otherwise.

`tsx
test={a > b}
then={'a is greater then b'}
else={'a is not greater than b'}
/>
`

Map

Render the result of dispatching to the map method of target passing the with function as the first argument.

`tsx



} />
``