Node Package Master

    react-conditional-block

    0.0.9 • Public • Published

    NPM

    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:

    import React from 'react';
    import {First, Second, Third, Other} from 'some-components';
     
    const Component = ({first, second, third, ...rest}) => {
      return (
        <div>
          {
            first && ( 
              <First {...rest} />
            )
          }
          { 
            second && (
              <Second {...rest}>
                { 
                  third && (
                    <Third {...rest} />
                  )
                }
                <Other>
                  <div>Inner</div>
                </Other>
              </Second>
            )
          }
        </div>
      );
    };

    Becomes something like this:

    import React from 'react';
    import {First, Second, Third, Other} from 'some-components';
    import Conditional from 'react-conditional-block';
     
    const Component = ({first, second, third, ...rest}) => {
      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:

    import React from 'react';
    import Conditional from 'react-conditional-block';
     
    const App = ({somethingTruthy, somethingFalsy}) => {
      return (
        <div>
          <Conditional
            predicate={somethingTruthy}>
              I am rendered!
          </Conditional>
          <Conditional
            predicate={somethingFalsy}>
              I am NOT rendered!
          </Conditional>
        </div>
      );
    };
     
    export default App;

    Props

    Props you may want to specify include:

    • children - Any renderable content. Will be displayed when predicate is truthy.
    • predicate - Boolean. This determines whether or not to render the children wrapped by Conditional.

    Thanks

    If you are interested you can follow me on twitter

    License

    MIT Licensed. Copyright (c) Matt Shirlaw 2019.

    Install

    npm i react-conditional-block

    DownloadsWeekly Downloads

    5

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    193 kB

    Total Files

    8

    Last publish

    Collaborators

    • mshirlaw