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

Performance

As of version 0.0.4:

Contributions, Issues, and Changes

Please open an issue if you would like to contribute!

Acknowledgement

Thanks to Noel Broda's article on how to create and publish a React component on NPM!