FileJet - React integration

React library which provides an easy drop-in solution for your images.

Installation

npm install filejet-react --save

Example

import { FilejetProvider, Img } from 'filejet-react';
import React from 'react';

const filejetConfig = { storageId: 'abc123' };

function App() {
  return (
    <FilejetProvider config={filejetConfig}>
      <Img src="https://example.com/img.jpg" width={200} height={200} alt="..." />
    </FilejetProvider>
  );
}

Components

<FilejetProvider>

All components require <FilejetProvider> with the necessary config:

• storageId: your storage ID (required)
• maxDPR: maximum DPR, which srcsets should support (defaults to 2)

Example

<FilejetProvider config={{ storageId: 'abc123', maxDPR: 4 }}>
  <div>...</div>
</FilejetProvider>

<Img>

Use <Img> to render FileJet image.

Optionally, provide width or height or both to fetch the image of the right size. Source sets for high DPI devices will be generated automatically.

Properties

Name	Description	type	example
src	file ID or absolute path to external file	string, required	"80c1ae98f9d020a80c1ae98f9dd4020a"
width	expected width in pixels	number, optional	200
height	expected height in pixels	number, optional	200
srcMutation	custom mutation - ignores width/height	string, optional	resize_300x300,crop_200x200_10_10
srcSetMutation	custom srcset mutation - ignores width/height	object, optional	{ '200w': 'resize_200x200' }

💡 Component also accepts all <img> attributes (alt, sizes, etc.) except srcset.

Example

<Img src="80c1ae98f9d020a80c1ae98f9dd4020a" width={200}>
<Img src="80c1ae98f9d020a80c1ae98f9dd4020a" height={200}>
<Img src="80c1ae98f9d020a80c1ae98f9dd4020a" width={200} height={200}>
<Img src="80c1ae98f9d020a80c1ae98f9dd4020a" srcMutation="fit_200x200">
<Img src="https://example.com/image.jpg" srcSetMutation={{ '1x': 'resize_10x10', '2x': 'crop_20x20'}}>

---

🚀 Powered by FileJet!