React-conditional-display NPM

react-conditional-display 🌤⛅️🌥

A react component that conditionally display the component's children elements in the UI.

The component is available on npmjs. Simply run:

npm install react-conditional-display

Props

Name	Required	Default	Type	Comment
if	Yes	-	`bool`	Determines whether to render the principal children element(s).
else	No	`null`	`func`, `object` (JSX)	Alternative React component that would be rendered if `if` is false.
tag	No	`div`	`string`	The HTML tag of the parent container if there are multiple children elements.
className	No	`null`	`string`	Class associated with the parent container if there are multiple children elements.

The component detects whether there are multiple children elements and will automatically wrap them in a div tag if no tag is provided. Otherwise, the sole child element would be rendered exactly as written.

Example Usage

import React, { Component } from 'react';
import Display from 'react-conditional-display';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {show: true}
    this.renderSomething = this.renderSomething.bind(this);
  }

  renderSomething() {
    return <h2>Hey! I am the alternative render!</h2>
  }

  render() {
    return (
      <div>
        <span>This will always show!</span>
        <Display
        if={this.state.show}
        else={this.renderSomething()}
        tag="section"
        className="center-modal">
          <h1>Hi friends!</h1>
          <div>I am the primary render!</div>
        </Display>
      </div>
    );
  }
}
export default App;

View on Codepen