react-placeholder-image

Quickly mock up UI's with placeholder images.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-placeholder-image
4270.1.85 years ago5 years agoMinified + gzip package size for react-placeholder-image in KB

Readme

🌄 React Placeholder Image
Quickly mock up UI's with placeholder images.

CustomPlaceholder

Powered by https://placeholder.com

Usage

Use the CustomPlaceholder React component
import { CustomPlaceholder } from 'react-placeholder-image';

Simple placeholder image
// simple, square image (width and height are required)
<CustomPlaceholder width={200} height={200} />

Complex placeholder image
// image with custom background-color, text, textColor, width, and height
<CustomPlaceholder
  width={200}
  height={100}
  backgroundColor="#123456"
  textColor="#ffffff"
  text="Hello World!"
/>

or simply generate an image URL to use in your own image component
import { generateCustomPlaceholderURL } from 'react-placeholder-image';

// simple sized image
const placeholderImageURL = generateCustomPlaceholderURL(200, 200);

// pass options to customize the background-color, text, and height
const otherPlaceholderImageURL = generateCustomPlaceholderURL(200, 100, {
  backgroundColor: '#123456',
  textColor: '#ffffff',
  text: 'Hello World!',
});

PhotoPlaceholder

Powered by https://picsum.photos

Usage

Use the PhotoPlaceholder React component
import { PhotoPlaceholder } from 'react-placeholder-image';

Simple photo placeholder image
// simple, square image (width and height are required)
<PhotoPlaceholder width={200} height={200} />

Grayscale photo placeholder image
// image with grayscale option
<PhotoPlaceholder width={200} height={100} grayscale />

or simply generate an image URL to use in your own image component
import { generatePhotoPlaceholderURL } from 'react-placeholder-image';

// simple sized image
const placeholderImageURL = generatePhotoPlaceholderURL(200, 200);

// pass options to get grayscale
const otherPlaceholderImageURL = generatePhotoPlaceholderURL(200, 100, {
  grayscale: true,
});