Skip to content

A React component which accepts one or more React elements and allows you to navigate them in a lightbox.

License

Notifications You must be signed in to change notification settings

ggordan/react-theatre

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-theatre

Unstable: Do not use in production

A React component which accepts one or more React elements and allows you to navigate them in a lightbox.

react-theatre

Example

var React = require('react');
var Theatre = require('react-theatre');

var Example = React.createClass({
    render: function() {
        return(
            <div>
                <p> Currently viewing item: {this.props.index} </p>
            </div>
        );
    },
});

var App = React.createClass({

    getInitialState: function() {
        return {
            theatre: true,
        };
    },

    _toggleTheatre: function() {
        this.setState({
            theatre: !this.state.theatre,
        });
    },

    _renderTheatre: function() {
        if (this.state.theatre) {
            return <Theatre entries={this.props.entries} openItemIndex={50} closeHandler={this._toggleTheatre} />;
        }
    },

    render: function() {
        return(
            <div>
                {this._renderTheatre()}
                <button onClick={this._toggleTheatre}>Open</button>
            </div>
        );
    },
});

var items = [];
for (var i = 0; i < 100; i++) {
    items.push(<Example key={i} index={i} />);
}

React.render(<App entries={items} />, document.getElementById('app'));

Required props

  • entries React.PropTypes.arrayOf(React.PropTypes.element) - The only required property is an array of React elements that you want to render.
  • closeHandler React.PropTypes.func - The function(currentItemIndex) to call when the user clicks on the close button.

Optional props

  • showProgress React.PropTypes.bool - Whether or not to show the top progress bar.
  • openItemIndex React.PropTypes.number - The index of the entry that you wish to open initially.

About

A React component which accepts one or more React elements and allows you to navigate them in a lightbox.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published