React.js

Here are the steps to integrate Gumlet Service with React.js

Suggest Edits

To keep the scope of this document limited and simple we expect you have ReactJS development environment setup and a basic application running.

We will be making changes to the App.js file directly but you can always replicate these steps in your base layout so that the images are optimised in the entire application.

Step 1: Add some images to your component to test

function App() {
  return (
    <div className="App">
      <img src="https://demo.gumlet.io/logo.png" style={{width:"300px"}} />
      <img src="https://demo.gumlet.io/logo.png" style={{width:"250px"}} />
      <img src="https://demo.gumlet.io/logo.png" style={{width:"500px"}} />
    </div>
  );
}

After starting the development server navigate to http://localhost:3000 you should see three images

Step 2: Load the gumlet.js file in a function in the component

function App() {
  const loadGumletScript = () => {
    return new Promise(function (resolve, reject){
      // Checks if the script is already loaded on the page
      if(document.querySelector("script#gumlet-sdk-script")){
        resolve();
      }else {
        window.GUMLET_CONFIG = {
            hosts: [{
                current: "{{example.com}}",
            		gumlet: "{{mysubdomain}}.gumlet.io"
            }],
            lazy_load: true
        };
        // Loads the script and appends it on the page
        const script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/gumlet.min.js";
        script.id = "gumlet-sdk-script";
        script.sync = true;
        script.onload = () => resolve();
        document.body.appendChild(script);
      }
    });
  }

  return (
    <div className="App">
      <img src="https://demo.gumlet.io/logo.png" style={{width:"300px"}} />
      <img src="https://demo.gumlet.io/logo.png" style={{width:"250px"}} />
      <img src="https://demo.gumlet.io/logo.png" style={{width:"500px"}} />
    </div>
  );
}

🚧

Warning

Please replace {{mysubdomain}} in the above code to the subdomain created by you on Gumlet. Please also replace {{example.com}} with the domain from where images are currently being served.

Step 3: Call the loadGumletScript function in the components useEffect hook and change the src attribute of the img tag to data-src

function App() {
  const loadGumletScript = () => {
    return new Promise(function (resolve, reject){
      // Checks if the script is already loaded on the page
      if(document.querySelector("script#gumlet-sdk-script")){
        resolve();
      }else {
        window.GUMLET_CONFIG = {
            hosts: [{
                current: "{{example.com}}",
            		gumlet: "{{mysubdomain}}.gumlet.io"
            }],
            lazy_load: true
        };
        // Loads the script and appends it on the page
        const script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/gumlet.min.js";
        script.id = "gumlet-sdk-script";
        script.sync = true;
        script.onload = () => resolve();
        document.body.appendChild(script);
      }
    });
  }

  useEffect(() => {
    loadGumletScript();
  });

  return (
    <div className="App">
      <img data-src="https://demo.gumlet.io/logo.png" style={{width:"300px"}} />
      <img data-src="https://demo.gumlet.io/logo.png" style={{width:"250px"}} />
      <img data-src="https://demo.gumlet.io/logo.png" style={{width:"500px"}} />
    </div>
  );
}

👍

Gumlet is live now!

This is all that was needed to deliver responsive images to your users.

Full code example

import React, { useEffect } from "react";
import './App.css';

function App() {
  const loadGumletScript = () => {
    return new Promise(function (resolve, reject){
      // Checks if the script is already loaded on the page
      if(document.querySelector("script#gumlet-sdk-script")){
        resolve();
      }else {
        window.GUMLET_CONFIG = {
            hosts: [{
                current: "{{example.com}}",
            		gumlet: "{{mysubdomain}}.gumlet.io"
            }],
            lazy_load: true
        };
        // Loads the script and appends it on the page
        const script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/gumlet.min.js";
        script.id = "gumlet-sdk-script";
        script.sync = true;
        script.onload = () => resolve();
        document.body.appendChild(script);
      }
    });
  }

  useEffect(() => {
    loadGumletScript();
  });

  return (
    <div className="App">
      <img data-src="https://demo.gumlet.io/logo.png" style={{width:"300px"}} />
      <img data-src="https://demo.gumlet.io/logo.png" style={{width:"250px"}} />
      <img data-src="https://demo.gumlet.io/logo.png" style={{width:"500px"}} />
    </div>
  );
}

export default App;

Updated 3 days ago