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.
- Get your Domain Key
- React installation
- Get your images to work
#
1. Get your Domain KeyThe 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#
Manual Installation- Download the directory Piio-images containing
piio.js
andpiioElement.js
from our repository - Load
piio.js
andpiioElement.js
in your code
#
Include the Piio Images componentsAdd the following lines to import the component:
Initialize the component by adding it to your template file:
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 workPiioElement 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
<img>
tag#
HTML Add the PiioElement with the tag
attribute set as img
and the URL of the image in the path
attribute.
<div>
or other HTML tags#
Background Images for 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:
<picture>
tag#
HTML 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
Read more about Art Direction here.
#
HardcoreIf 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.