Rm-react-image NPM

rm React image ⚡

🟢 Minimalistic, blazing fast and seo friendly component for React ⚛️

The main objective is to achieve the best possible performance without penalizing SEO. Also, it use W3C img attributes.

Features

⚡️ Optimized for performance
📈 SEO friendly
😪 Lazy load support
🌇 Loading and error placeholders
🔁 Server side support (SSR)
☝ No dependencies, just one possible polyfill: intersection-observer polyfill
🗜️ 5KB gzipped (plus 1KB if you need intersection-observer)

Overview React Slidy is a simple and minimal slider component. The main objective is to achieve the best performance and smoothness on React apps, specially on mobile 📱.

Installation

# Yarn
$ yarn add rm-react-image

# NPM
$ npm i --save rm-react-image

Usage

Common usage with lazy loading for loading="lazy"

import React from 'react';
import { Image } from 'rm-react-image';

const deviceUserAgent = 'googlebot'

const MyImage = ({ alt, height, src, width }) => (
  <Image
    alt={alt}
    src={src} // also support srcset and sizes attributes
    width={width}
    height={height}
    loading="lazy"
    userAgent={deviceUserAgent} />
);

export default MyImage;

Loading "lazy" attribute will act differently depends on User-Agent.

If Image detects that User-Agent is a bot, the image will be rendered on SSR and will use native browser lazy loading
If the image detects that User-Agent is a user, the image will render when it enters to the viewport.

For that reason, it is important to pass userAgent prop on client and server-side.

Props

Prop	Type	Default	Description
alt	`String`		Indicate the alternate fallback content to be displayed if the image has not been loaded
base64Placeholders	`Object`	`{loading: undefined, error: undefined}`	Define Base64 placeholder
className	`String`		Element class name
decoding	`String`		Represents a hint given to the browser on how it should decode the image.
height	`String` or `Number`		Indicates the rendered height of the image in CSS pixels.
loading	`String`		Determine whether to load the image immediately (`eager`) or on an as-needed basis (`lazy`).
onError	`Function`		Callback triggered if an error occurs while loading an external file.
onLoad	`Function`		Callback triggered if image load successfully.
sizes	`String`		This string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used. Read the documentation on the sizes page for details on the format of this string.
src	`String`		Contains the full URL of the image including base URI.
srcSet	`String`		This specifies a list of candidate images, separated by commas (`',', U+002C COMMA`). Each candidate image is a URL followed by a space, followed by a specially-formatted string indicating the size of the image. The size may be specified either the width or a size multiple. Read the srcset page for specifics on the format of the size substring.
style	`Object`		CSS style properties to inline them.
userAgent	`String`		Device user agent used for improve rendering strategy.
width	`String` or `Number`		Indicates the rendered width of the image in CSS pixels.

How to

Use error placeholder

import React from 'react';
import { Image } from 'rm-react-image';

const deviceUserAgent = 'googlebot'
const imageProps = {
  base64Placeholders: {
    error: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  },
  onError: () => console.log('Image can not be found')
}

const MyImage = ({ alt, height, src, width }) => (
  <Image
    alt={alt}
    src={src} // also support srcset and sizes attributes
    width={width}
    height={height}
    loading="lazy"
    userAgent={deviceUserAgent}
    {...imageProps} />
);

export default MyImage;

Use loading placeholder

import React from 'react';
import { Image } from 'rm-react-image';

const deviceUserAgent = 'googlebot'
const imageProps = {
  base64Placeholders: {
    loading: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  },
  onLoad: () => console.log('Image has been loaded'),
}

const MyImage = ({ alt, height, src, width }) => (
  <Image
    alt={alt}
    src={src} // also support srcset and sizes attributes
    width={width}
    height={height}
    loading="lazy"
    userAgent={deviceUserAgent}
    {...imageProps} />
);

export default MyImage;

Not lazy load image for loading="eager"

import React from 'react';
import { Image } from 'rm-react-image';

const deviceUserAgent = 'googlebot'

const MyImage = ({ alt, height, src, width }) => (
  <Image
    alt={alt}
    src={src} // also support srcset and sizes attributes
    width={width}
    height={height}
    loading="eager"
    userAgent={deviceUserAgent} />
);

export default MyImage;