React.js
Here are the steps to integrate Gumlet Service with React.js
To keep the scope of this document limited and simple we expect you to have a 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 optimized 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
loadGumletScript
function in the components useEffect
hook and change the src attribute of the IMG tag to data-srcfunction 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 5 months ago