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 [email protected]

• 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 [email protected].

This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator