Meteor and React: Fullscreen Viewer Component

Another post as result of my Meteor React experience.
This is a simple approach to build a fullscreen viewer for any React component.

I assume you’ve added the bootstrap and react package to your project.

The fullscreen viewer component is very simple. It wraps the children in a div tag and adds an Icon to the upper right of this container.

FullscreenContainer = React.createClass({
      screenClass: 'display-normal'
    if(this.state.screenClass != 'display-fullscreen'){
      this.setState({screenClass: 'display-fullscreen'});
      this.setState({screenClass: 'display-normal'});
    if(this.state.screenClass === 'display-fullscreen'){
      return <i onClick={this.switchFullscreen} className="glyphicon screen-icon glyphicon-remove" />
      return <i onClick={this.switchFullscreen} className="glyphicon screen-icon glyphicon-fullscreen" />
  render() {
    return <div className={this.state.screenClass}>

Next add this css code. The fullscreen display is works with css only!

.display-fullscreen {
  background-color: white;
  overflow: hidden;

  float: right;
  background: white;
  right: 0;
  font-size: 20px;

This css classes will be applied to the fullscreen container and make it overlay the window.

Here’s and example how you can use this component in another view:


render() {
     return <FullscreenContainer>




In my case the final result for a markdown editor looked like this:

fullscreen container default

Before clicking on the fullscreen button.

fullscreen container display

After clicking.

2 Responses

    1. Simply use the CSS and create a container with the classname. For the toggle logic you have to give me more details about the framework you’re using. However this is a react solution only, but easily portable to jQuery.

Leave a Reply

Back to Top
%d bloggers like this: