Skip to main content

Using Piio Images in a React.js Application

Following this guide, you will be able to successfully optimize and deliver all your website images using Piio Images on React.

  1. Get your Domain Key
  2. React installation
  3. Get your images to work

1. Get your Domain Key#

The Piio Images library uses a Domain Key to identify your website and where the images are hosted. If you haven't created an account and added your first domain, follow the steps after signing up for a free account here.

2. React installation#

NPM Installation#

npm install piio-images-react

Manual Installation#

  • Download the directory Piio-images containing piio.js and piioElement.js from our repository
  • Load piio.js and piioElement.js in your code

Include the Piio Images components#

Add the following lines to import the component:

import Piio from '../components/Piio-images/piio'
import PiioElement from '../components/Piio-images/piioElement'

Initialize the component by adding it to your template file:

<Piio domainKey="DOMAIN-KEY"></Piio>

Replace DOMAIN-KEY with the Domain Key for you domain. You can find your Domain Key on your dashboard at https://app.piio.co/

3. Get your images to work#

PiioElement is a React component that will replace the usage of img tags or other HTML elements when you want to load an image.

PiioElement properties

  • tag(required) - defines which HTML tag will be used [img|div|a|..]
  • path(required) - URL of the image to be optimized and rendered on the HTML element
  • Any HTML valid attribute - PiioElements will pass all the attributes to the final HTML element

HTML <img> tag#

Add the PiioElement with the tag attribute set as img and the URL of the image in the path attribute.

<PiioElement tag="img" path="https://piio.co/img/whypiio-hero@3x.png" alt="Piio Element" class="example-class"></PiioElement>

Background Images for <div> or other HTML tags#

Add the PiioElement with the tag attribute set as the element you want to have the background applied. You can add any other attributes and content to the element as it will be added.

Here is an example using an anchor tag:

<PiioElement path="https://piio.co/img/whypiio-hero@3x.png" tag="a" href="https://www.piio.co">
<h1>Example content</h1>
</PiioElement>

HTML <picture> tag#

Each <source> inside your <picture> tag will be replaced with a PiioElement, the tag property will be set to source, and the URL of the image will be included in the path attribut

<picture>
<PiioElement path="https://secureservercdn.net/198.71.233.106/w4y.80f.myftpupload.com/wp-content/uploads/2020/02/backpack-desktop.jpg" tag="source" media="(min-width:969px)">
</PiioElement>
<PiioElement path="https://secureservercdn.net/198.71.233.106/w4y.80f.myftpupload.com/wp-content/uploads/2020/02/backpack-mobile.jpg" tag="source" media="(max-width:969px)">
</PiioElement>
<PiioElement path="https://secureservercdn.net/198.71.233.106/w4y.80f.myftpupload.com/wp-content/uploads/2020/02/backpack-mobile.jpg" tag="img">
</PiioElement>
</picture>

Read more about Art Direction here.

Hardcore#

If you don't want to use our components, you can take a look at the guide to integration Piio Images manually on any HTML based web application here.