Router update?

[frontend-collective]

Router update?

[fritz-c]

The component is made such that you can request such a url change in the onMoveNextRequest or onMovePrevRequest listeners.

Here's a half-built example based on the readme example:

var React    = require('react');
var Lightbox = require('react-image-lightbox');

var images = [
    {src: '//placekitten.com/1500/500', slug: 'image1'},
    {src: '//placekitten.com/4000/3000', slug: 'image2'},
    {src: '//placekitten.com/800/1200', slug: 'image3'},
    {src: '//placekitten.com/1500/1500', slug: 'image4'}
];

module.exports = React.createClass({
    getInitialState: function() {
        return {
            index: this.getIndexFromWindowUrl(),
            isOpen: false
        };
    },
    openLightbox: function() {
        this.setState({ isOpen: true });
    },
    closeLightbox: function() {
        this.setState({ isOpen: false });
    },
    setMyWindowUrl: function(slug) {
        // do url modification
        // ...
    },
    getIndexFromWindowUrl: function() {
        // get image index from your current URL
        // ...
    },
    moveNext: function() {
        var nextIndex = (this.state.index + 1) % images.length;
        this.setMyWindowUrl(images[nextIndex].slug);
        this.setState({ index: nextIndex });
    },
    movePrev: function() {
        var nextIndex = (this.state.index + images.length - 1) % images.length;
        this.setMyWindowUrl(images[nextIndex].slug);
        this.setState({ index: nextIndex });
    },
    render: function() {
        var lightbox = '';
        if (this.state.isOpen) {
            lightbox = (
                <Lightbox
                    mainSrc={images[this.state.index].src}
                    nextSrc={images[(this.state.index + 1) % images.length].src}
                    prevSrc={images[(this.state.index + images.length - 1) % images.length].src}

                    onCloseRequest={this.closeLightbox}
                    onMovePrevRequest={this.movePrev}
                    onMoveNextRequest={this.moveNext}
                />
            );
        }

        return (
            <div>
                <button type="button" onClick={this.openLightbox}>Open Lightbox</button>
                {lightbox}
            </div>
        );
    }
});