How do you dynamically insert a React component into the DOM (for instance a dialog)?

Question

I'd like to replace javascript's built in alert() function with a React Component that handles the same task: namely, showing a quick, dismissible message to the user.

Now, I can make this happen by creating a component and placing it in my markup. eg

<div> 
    <BunchOfComponents />
    <MoreComponents />

    <MyAlertDialog open={this.props.shouldShowAlert} />
</div>

And then make it show by controlling its open state via Redex or whatever.

However, what I'd like to do, it be able to not declare it in my markup and instead inject it into the dom via a function.

Something like...

myCoolFunction() {
    const alert = (
        <MyAlert
            open={true}
            msg="Hello World" 
        />
    )
    DOM.findNode('someID').insert(alert);  <-- fake API obviously   
}

Is it possible to dynamically append components like that?

Answer 1

It's possible to inject some custom stuff with DOM manipulation inside of React rendered tree, if it's rendered as an empty node. Assuming you have somewhere in react's render:

<div id="you-know-id />

You can then find this node by id, and assign its innerHTML with something. More 'reactish' way of doing it is using the refs instead of id.

Usually, this stuff is being wrapped inside componentDidMount (where you insert) and componentWillUnmount (where you remove and unsubscribe from anything) methods.

Because, doing dirty tricks you probably want to avoid memory leaks. So, it's the way.

By the way, I don't think that it's the right way of approaching the problem you just described. What you could do instead, is something like this:

{ this.props.shouldShowAlert && <MyAlertDialog open={ true } /> }

And then in will be actually mounted when it's opened, and unmounted when it's closed.

Still, it's way safer to control injection with the state or prop member. You really need to know what you're doing when you do direct DOM manipulation. Say, wrapping some jQuery plugin :). Then you're fine, cause there are no other way :).

Answer 2

This is the dirty way I do it at work (that didn't sound right...) http://codepen.io/matthsiung/pen/JKOpVW

I'm sure there's a better 'proper' way to do it but it cleans up after itself so it works for me.

Here are the key points:

Dialog trigger

//Your trigger function will render the dialog component to a newly created dummy div,
// while also passing it into the component as a prop

function showDialog() {
  var div = document.createElement('div');
  ReactDOM.render(
     <Dialog container={div}/>,
     document.body.appendChild(div)
  );
} 

Dialog component:

//When your dialog component closes it unmounts itself
close(){
  ReactDOM.unmountComponentAtNode(this.props.container);
},

//Before unmount it cleans up after itself by removing the dummy div   
componentWillUnmount() {
 document.body.removeChild(this.props.container); 
},

Answer 3

Maybe react-portal can help you.

From the docs:

transports its child into a new React component and appends it to the document.body (creates a new independent React tree)

I use a lot (for dialogs/modals and menu popups). Very useful and lightweight.