react-placeholder-image

🌄 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, square image (width and height are required)
<CustomPlaceholder width={200} height={200} />

// 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, square image (width and height are required)
<PhotoPlaceholder width={200} height={200} />

// 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,
});