This library introduce some helpers to simplify conditional rendering logic in React. Is heavily inspired in the classNames library and in the Rust programing languaje.
Recive an array of [condition, component, alternativeComponent?] and returns a view containing all the components wich paired conditions are trues, and, if is set, the alternativeComponent of the conditions that evalute to false
const Home = ({ showNav, content, searchEnabled }) => (
<>
{showNav && <Nav />}
{searchEnabled && content && <SearchBar content={content} />}
{content ? <Cards content={content} /> : <Error />}
</>
);
export default Home;
import { when } from "view-logics";
const Home = ({ showNav, content, searchEnabled }) =>
when([
[showNav, <Nav />],
[searchEnabled && content, <SearchBar content={content} />],
[content, <Cards content={content} />, <Error />],
]);
export default Home;
Recive an array of [condition, component, alternativeComponent?] and returns a view containing the first component wich paired condition is true or the first alternativeComponent(if is defined) wich condition is false.
const Number = ({ number }) => (
<>
{number < 0 ? (
<Negative number={number} />
) : (
<>
{number % 2 === 0 ? <Pair number={number} /> : <Odd number={number} />}
</>
)}
</>
);
export default Number;
import { match } from "view-logics";
const Number = ({ number }) =>
match([
[number < 0, <Negative number={number} />],
[number % 2 === 0, <Pair number={number} />, <Odd number={number} />],
]);
export default Number;
Recive an array of [cuantity | condition, component, alternativeComponent?] and returns a view containing the components n times the cuantity if is a Number or once if is a trusy value or the alternativeComponent if is defined and his condition evaluate to false.
const Rate = ({ stars }) => (
<>
<Line />
<Line />
{Array.from(Array(stars).keys()).map((e) => (
<strong>*</strong>
))}
<Line />
<Line />
</>
);
export default Rate;
import { times } from "view-logics";
const Rate = ({ stars }) => times(
[
[2, <Line />]
[stars, <strong>*</strong>]
[2, <Line />]
]
);
export default Rate;
Recive an array of [ conditions ] and returns a boolean if al conditions are trusy values
import { all } from "view-logics";
const consitions = [ condidition1, condition2, condition3 ]