Package Exports

react-toggle-display

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-toggle-display) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-toggle-display

A stateless react component that toggles the display of it's children. It's like ng-show, ng-hide or ng-if but for react.

This allows you to DRY up statements like this:

<div className={this.props.shouldHide ? 'hidden' : ''}>

Example usage:

import ToggleDisplay from 'react-toggle-display';

export default React.createClass({

    getInitialState() {
        return {
            isAuthorized: false
        };
    },

    render() {
        return (
            <ToggleDisplay show={this.state.isAuthorized}>
                <p>Secret stuff for authorized people only.</p>
            </ToggleDisplay>
        );
    }

});

View demo

Props

hide - boolean

show - boolean

if - boolean

The two first props are simply the inverse of each other. Using both at the same time will result in canceling each other out.

Install

npm install react-toggle-display

Tests

To run tests: npm test

Contributors

Big thanks to willgm for his contributions.

Change Notes

Note that if you are using a version under 0.1.1, you will have to compile react-toggle-display's JSX yourself. I recommend just updating to 1.x so you don't have to worry about that. No breaking API changes in 1.x.

While v2 does not change anything functionally, it was refactored to be a "stateless functional component", which won't work in React versions less than 0.14.