0.0.4 ā¢ Published 2 years ago
@icastro085/react-canrender v0.0.4
Welcome to @icastro085/react-canrender š
A small component to help render other components according a condition
Install
npm
npm i @icastro085/react-canrender
yarn
yarn add @icastro085/react-canrender
Usage example
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>
);
With React-CanRender
you can rewrite this into a more readable:
const Container = ({ name }) => (
<CanRender when={name?.length}>
My name is {name}!
<ElseRender>Sorry, the name is missing.</ElseRender>
</CanRender>
);
CanRender
const Container = () => (
<CanRender when={true}>
Content to render when condition is true
</CanRender>
);
ElseRender
const Container = () => (
<CanRender when={false}>
It will not render
<ElseRender>Render when condition is false.</ElseRender>
</CanRender>
);
ElseCanRender
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>
);
Run tests
yarn test
Author
š¤ Ivanildo de Castro ivanildo.decastro085@gmail.com
- Github: @icastro085
- LinkedIn: @https:\/\/www.linkedin.com\/in\/icastro085\/
š¤ Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Show your support
Give a āļø if this project helped you!
š License
Copyright Ā© 2021 Ivanildo de Castro <ivanildo.decastro085@gmail.com>.
This project is MIT licensed.
This README was generated with ā¤ļø by readme-md-generator
0.0.4
2 years ago
0.0.3
3 years ago
0.0.1
3 years ago
0.0.2
3 years ago
0.0.1-alpha.2
3 years ago
0.0.1-alpha.0
3 years ago