🌄 React Placeholder Image

Quickly mock up UI's with placeholder images.

CustomPlaceholder

[Powered by https://placeholder.com]


Usage

Use the CustomPlaceholder React component

``jsx
import { CustomPlaceholder } from 'react-placeholder-image';
`

!Simple placeholder image

`jsx
// simple, square image (width and height are required)

`

!Complex placeholder image

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

or simply generate an image URL to use in your own image component

`jsx
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]

![](https://picsum.photos/400/200)

Usage

Use the PhotoPlaceholder React component

`jsx
import { PhotoPlaceholder } from 'react-placeholder-image';
`

!Simple photo placeholder image

`jsx
// simple, square image (width and height are required)

`

!Grayscale photo placeholder image

`jsx
// image with grayscale option

`

or simply generate an image URL to use in your own image component

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