React-essentialrect NPM

React EssentialRect

A React implementation of the essentialRect responsive display standard. EssentialRectImg is a React component that acts like an <img/> element, using the image's essential rectangle to reponsiviely display the image within the client area.

Quick demo | Code Sandbox

What is essentialRect?

EssentialRect is a standard for responsive image display. Rather than cropping an image to a rectangle of a certain aspect ratio, a rectangle (its essentialRect) is defined for an image as "essential". This allows the image to be shown in a wide range of aspect ratios without cropping or leterboxing. The essentialRect will be guaranteed to be displayed, while the rest of the image will be considered "nice to have", and will be used to fill the remaining client area. The essentialRect will be as centered as possible while still avoiding letterboxing.

essentialrect example An image with an essential rect, rendered into two aspect ratios. Photo by Rodnae Productions @ Pexel

Installation

npm i react-essentialrect --save

Usage

There is no default export.

import { EssentialRectImg } from "react-essentialrect";
import "react-essentialrect/dist/essentialrect-img.css";

Example

import { EssentialRectImg } from "react-essentialrect";
import "react-essentialrect/dist/essentialrect-img.css";

const imageHeight = 300;
const aspectRatio = 1.91;

function App(imageUrl) {
  const imageStyles = {
    width: `${imageHeight * aspectRatio}px`,
    height: `${imageHeight}px`,
  };

  return (
    <div className="App">
      <EssentialRectImg
        src={imageUrl}
        essentialRect={essentialRect}
        style={imageStyles}
      />
    </div>
  );
}