filejet-react v0.1.1

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

💡 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!