Open a Component in New Window on a Click in React

Pop out a react component into a new window

You can use React Portal to open a new window and maintain it under React tree.

It's a semi-long post so check out this post.

Using a React 16 Portal to do something cool

You can open a new window, do what you need to do, and forward the user to a different URL, which won't affect your original window.

How can I handle an event to open a window in react js?

You are on the right way!

Is it something you need? I prepared the example:
click here

var Example = React.createClass({
    fbShare: function() {
        window.open('http://www.facebook.com/sharer.php?s=100&p[title]=Fb Share&p[summary]=Facebook share popup&p[url]=javascript:fbShare("http://jsfiddle.net/stichoza/EYxTJ/")&p[images][0]="http://goo.gl/dS52U"', 'sharer', 'toolbar=0,status=0,width=548,height=325');
    },

    render: function() {
        return (<div>
            <img src="http://pasadenainstitute.com/fb-shareTransp122x42.png" onClick={this.fbShare} />
        </div>);
    }
});

ReactDOM.render(
    <Example />,
    document.getElementById('container')
);

How to open a page in new tab on click of a button in react? I want to send some data to that page also

Since you were going to send big data, appending them to your target URL looks shabby. I would suggest you use 'LocalStorage' for this purpose. So your code looks like this,

raiseInvoiceClicked(){
   // your axios call here
   localStorage.setItem("pageData", "Data Retrieved from axios request")
   // route to new page by changing window.location
   window.open(newPageUrl, "_blank") //to open new page
}

In your RaisedInvoice.jsx, retrieve the data from Local Storage like this,

componentWillMount() {
  localStorage.pagedata= "your Data";
  // set the data in state and use it through the component
  localStorage.removeItem("pagedata");
  // removing the data from localStorage.  Since if user clicks for another invoice it overrides this data
}

---

Related Topics