React-Conditional-Block
React Conditional Block is a light weight component that gives you a conditional block to help you clean up your react code. A common pattern in React is to have multiple conditions in your render method which control when certain blocks are rendered. This can turn into a mess quite quickly.
For example, with React Conditional Block, something which might originally have looked like this:
;; const Component = { return <div> first && <First ...rest /> second && <Second ...rest> third && <Third ...rest /> <Other> <div>Inner</div> </Other> </Second> </div> ;};
Becomes something like this:
;;; const Component = { return <div> <Conditional predicate=first> <First ...rest /> </Conditional> <Conditional predicate=second> <Second ...rest> <Conditional predicate=third> <Third ...third /> </Conditional> <Other> <div>Inner</div> </Other> </Second> </Conditional> </div> ;};
Installation and usage
The easiest way to use react-conditional-block is to install it from npm and build it into your app with Webpack
npm install --save react-conditional-block
Then use it in your app:
;; const App = { return <div> <Conditional predicate=somethingTruthy> I am rendered! </Conditional> <Conditional predicate=somethingFalsy> I am NOT rendered! </Conditional> </div> ;}; ;
Props
Props you may want to specify include:
children
- Any renderable content. Will be displayed whenpredicate
is truthy.predicate
- Boolean. This determines whether or not to render the children wrapped byConditional
.
Thanks
If you are interested you can follow me on twitter
License
MIT Licensed. Copyright (c) Matt Shirlaw 2019.