React: modal with multiple link triggers

Question

Very new to React, I was wondering how to implement this pattern:

Modal window in DOM, hidden away until triggered.
Multiple links in document that can trigger the modal and pass data into it.

This is something you can probably find on your very own Facebook feed: just click 'share' on any post and you'll win a fantastic modal.

Not sure how you'd translate this into React's "components create DOM subtrees" way of things?

How would the triggering component message the modal component which would seem to be way off in the DOM tree?

Check out Pete Hunt's [`ReactLayeredComponentMixin`](http://jsfiddle.net/LBAr8/), which lets any component own multiple layers like modals. Also related: https://github.com/facebook/react/issues/379 — Ross Allen, May 01 '14 at 16:24
The [OverlayMixin](https://github.com/stevoland/react-bootstrap/blob/master/src/OverlayMixin.js) looks similar, think it is based on that mixin too. — Douglas, May 14 '14 at 20:16
It's actually pretty easy to do this yourself too. I like to use the `statics` component property to wrap `renderComponent` so that it always mounts on a particular position:fixed div in my dom (And creates and appends it to the body if it doesn't exist already). See my post here for a simple example component: http://stackoverflow.com/questions/24239157/how-to-make-react-js-play-nice-together-with-zurb-reveal-modal-form/24396559#24396559 — Mike Driver, Jun 24 '14 at 22:16

score 3 · Accepted Answer · answered May 19 '15 at 18:40

If you are using a Flux-style architecture, this can be achieved nicely with a Store.

Imagine you have a store called MyModalStore (or ShareModalStore, or whatever the modal is). The store contains all the data needed for the modal content, as well as whether or not it should be displayed.

Here is a simplified store that keeps track of whether the modal is visible, and what the title is:

MyModalStore.js

var _visible = false;
var _modalTitle;

var MyModalStore = {
    isModalVisible: function() {
        return _visible;
    },
    getModalTitle: function() {
        return _modalTitle;
    }
};

MyModalStore.dispatchToken = Dispatcher.register(function(payload) {
    var action = payload.action;
    switch (action.type) {
        case 'SHOW_MODAL':
            _visible = true;
            _modalTitle = action.modalTitle;
            MyModalStore.emitChange();
            break;

        case 'HIDE_MODAL':
            _visible = false;
            MyModalStore.emitChange();
            break;
    }
});

module.exports = MyModalStore;

Then the components that want to show the modal fire a 'SHOW_MODAL' action with a modalTitle, and the modal component itself listens for store changes to know when to show itself.

You can see this flux pattern in example projects on facebook/flux on github.

Without using flux, I guess you would provide a callback down your module hierarchy so that anyone can hit the callback to show the modal, and that is delegated to the actual modal component at the top-level. This isn't a great approach for larger applications, so I'd recommend the flux approach.

We published some store helper code here, but there are a lot of other libraries and examples out there as well.

Thanks, Flux does solve this nicely. I can't believe it's been a year since I've asked the question. I remember misusing React and writing ludicrously heavy view-controllers like it was yesterday... — maligree, May 20 '15 at 08:41

React: modal with multiple link triggers

1 Answers1

Linked