Is there a way to change the background color of the browser when navigating to a new route in ReactJS and React Router? Check out my tips below that I discovered during my experimentation:
I have managed to implement this on individual page views using <div>, but I am aiming to apply it to the entire background to display the color across the full browser window.
I initially tried using jQuery, but I'm uncertain if that's the correct approach. I also attempted to utilize React.DOM.body, but faced challenges in getting it to work:
render: function() {
return (
<div>
React.DOM.body( {style: background-color: "green"} )
<MyHeader />
<this.props.activeRouteHandler/>
</div>
);
}
EDIT 1: While I successfully implemented this method, it required duplicating the CSS class for each page where a different background was desired. A more efficient solution is to wrap each return with:
<div className="my-signup-bkg">.my-signup-bkg {
height: 100%;
width: 100%;
height: 100vh;
width: 100vw;
background-image: url("../images/mod-yellow-bkg.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
EDIT 2: I found another approach that I prefer as it requires less CSS code and is explicitly defined within the ReactJS component. By setting the CSS properties on a DIV:
.my-page-text {
padding: 8% 5% 5% 3%;
height: 100%;
width: 100%;
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-size: 100%;
}
Implementing this in my ReactJS component:
var MyLoginView = React.createClass({
render: function() {
var style = { backgroundImage: 'url("static/images/mod-yellow-bkg.jpg")' };
return (
<div className="my-page-text" style={style}>
Do something.
</div>
);
}
});