Using Sirv Media Viewer with React

Sirv Media Viewer is a powerful tool for showcasing rich media (360 spins, image zoom and videos) that plays great with React websites or apps.

Sirv Media Viewer also allows you to intelligently deliver responsive images to your visitors, by properly scaling and changing the image format on-the-fly, based on the user's device/browser.

Getting started

To utilize Sirv Media Viewer's advanced features (dynamic image resizing, image zoom tiling and much more), first you should:

1. Create a Sirv account (or login).
2. Upload media to your Sirv account.

Add Sirv embed markup

Add Sirv Media Viewer markup code - this example showcases a 360 spin, a zoomable image and a video in a gallery with thumbnails:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/example.spin"></div>
  <div data-src="https://demo.sirv.com/image.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/video.mp4"></div>
</div>

Initialize Sirv JS

The following example uses the document.createElement() method:

loadSirv(components) {
  return new Promise(resolve => {
    const script = document.createElement("script");
    script.src = "https://scripts.sirv.com/sirvjs/v3/sirv.js";
    script.type = "text/javascript";
    script.async = true;
    if (components) {
      script.dataset.components = components;
    }
    script.onload = resolve;
    document.body.appendChild(script);
  });
}

Now call the function in React's componentDidMount lifecycle method to initialize Sirv:

componentDidMount() {
  this.loadSirv("spin, zoom, video").then(() => {
    window.Sirv.start()
  });
}

For functional components you can use the UseEffect hook. Click here for a live sandbox. If you encounter flickering, try using UseLayoutEffect instead. Here's a demo and the code.

Load only the Sirv Media Viewer components you need by passing a string as a parameter in the loadSirv function. We're loading the spin, zoom and video components in this example. Calling the function without parameters will load the full Sirv JS.

Here's the end result:

Using the Sirv API and events

Use window.Sirv to control all aspects of Sirv Media Viewer and its components. Here's a full reference for all API methods and events:

• Sirv JS API methods
• Sirv JS events

Loading Sirv JS on event

Sometimes you might want to initialize Sirv only after a specific event occurs. Here's how to do it with React's onClick event:

1. Set the autostart option to off in your Sirv embed:

<div className="Sirv off" data-options="autostart:off">
  <div data-src="https://demo.sirv.com/tshirt-aqua.spin"></div>
</div>

2. Create a new function, let's name it startSirv:

startSirv() {
  if (typeof window.Sirv === "undefined") {
    this.loadSirv("spin").then(() => {
      window.Sirv.start(".off");
    });
  } else {
    window.Sirv.start(".off");
  }
}

3. Call it using the onClick event handler:

<button onClick={this.startSirv.bind(this)}>Start</button>

And we're done:

Custom navigation

The next example will to add a couple of buttons which can change the image currently shown.

Add some Sirv markup:

<!-- Sirv embed code -->
<div className="Sirv custom" data-options="arrows:false;thumbnails.enable:false;">
  <div data-src="https://demo.sirv.com/demo/apt/01.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/apt/02.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/demo/apt/03.jpg" data-type="zoom"></div>
</div>

previous() {
  if (window.Sirv.viewer.getInstance(".custom").isReady()) {
    window.Sirv.viewer.getInstance(".custom").prev();
  }
}
next() {
  if (window.Sirv.viewer.getInstance(".custom").isReady()) {
    window.Sirv.viewer.getInstance(".custom").next();
  }
}

Now, let's use the onClick event handler to bind buttons to these functions:

<div className="buttons">
  <button onClick={this.previous.bind(this)>⬅ Previous</button>
  <button onClick={this.next.bind(this)}>Next ➡</button>
</div>

Here's the end result, with Previous and Next buttons:

Got any questions?

As you can see, it's easy to add responsive images, 360 spins, videos and image zooms in your React website or app.

If you have any questions about using Sirv and React, please contact the Sirv team.