React-lorem-picsum NPM

React Lorem Picsum

A simple React wrapper around Lorem Picsum.

Install

NPM

 npm install react-lorem-picsum

Yarn

 yarn add react-lorem-picsum

How to Use

import { LoremPicsum } from "react-lorem-picsum";

// Specify ID
// https://picsum.photos/id/4/300/300
<LoremPicsum id={4} width={300} height={300} />

// Random image
// https://picsum.photos/seed/picsum/800/450
<LoremPicsum width={800} height={450} />

// Grayscale
// https://picsum.photos/seed/picsum/800/450?grayscale
<LoremPicsum width={800} height={450} grayscale />

// Blur
// https://picsum.photos/seed/picsum/800/450?blur=4
<LoremPicsum width={800} height={450} blur={4} />

// Omitting height will default it to the width
// https://picsum.photos/seed/picsum/800/800
<LoremPicsum width={800} />

Random

To force random images (ensure no cache) of images of the same size you can provide a number, string or true. If true is provided React Lorem Picsum will manage the value internally. Please note specifying an id will not work when random is present.

import { LoremPicsum } from "react-lorem-picsum";

// Custom value
// https://picsum.photos/100/100?random=120683
<LoremPicsum width={100} height={100} random={120683} />

// Managed value
// https://picsum.photos/100/100?random=1
<LoremPicsum width={100} height={100} random />

// https://picsum.photos/100/100?random=2
<LoremPicsum width={100} height={100} random />

// https://picsum.photos/200/200?random=1
<LoremPicsum width={200} height={200} random />

Aspect Ratio

If you are working with ratios you can provide one via the ratio prop. This will calculate the correct height given the width.

Please note Math.floor is used for uneven calculations.

import { LoremPicsum } from "react-lorem-picsum";

// https://picsum.photos/800/450
<LoremPicsum width={800} ratio="16:9" />

// https://picsum.photos/800/640
<LoremPicsum width={800} ratio="5:4" />

// https://picsum.photos/1600/392
<LoremPicsum width={1600} ratio="53:13" />

Props

Name	Type	Default	Description
id	number	`undefined`	Image ID. Please note this prop overrides `random`
random	boolean, string, number	`undefined`	Forces images with identical dimensions to use a random seed. If `true` is provided counter will be managed internally.
width	number		Image Width required
height	number	`width`	Image height
grayscale	boolean	`false`	Render image in grayscale
blur	number	`undefined`	Add blur to image. Must be a number between 1-10
extension	string	`undefined`	Provide extension to url. Currently supported extensions: `jpg`, `webp`
ratio	string	`undefined`	If a ratio is provided, e.g. `16:9` height will automatically be calculated. Please note the `height` prop will be ignored