npm i @icastro085/react-canrender
yarn add @icastro085/react-canrender
Take a look at the following presentational component, which contains a commonly used pattern for conditional rendering:
const Container = ({ name }) => (
<div>
{name ? <span>My name is {name}!</span> : <span>Sorry, the name is missing.</span>}
</div>
);
const Container = ({ name }) => (
<CanRender when={name?.length}>
My name is {name}!
<ElseRender>Sorry, the name is missing.</ElseRender>
</CanRender>
);
const Container = () => (
<CanRender when={true}>
Content to render when condition is true
</CanRender>
);
const Container = () => (
<CanRender when={false}>
It will not render
<ElseRender>Render when condition is false.</ElseRender>
</CanRender>
);
const Container = () => (
<CanRender when={false}>
It will not render
<ElseCanRender when={true}>
Render when condition is false of parent and condition for it is true.
</ElseCanRender>
<ElseRender>It will not render.</ElseRender>
</CanRender>
);
yarn test
👤 Ivanildo de Castro ivanildo.decastro085@gmail.com
- Github: @icastro085
- LinkedIn: @https://www.linkedin.com/in/icastro085/
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Give a ⭐️ if this project helped you!
Copyright © 2021 Ivanildo de Castro ivanildo.decastro085@gmail.com.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator