Quickly mock up UI's with placeholder images.
npm install react-placeholder-imageQuickly mock up UI's with placeholder images.
[Powered by https://placeholder.com]

Use the CustomPlaceholder React component
``jsx`
import { CustomPlaceholder } from 'react-placeholder-image';
`jsx`
// simple, square image (width and height are required)
`jsx`
// image with custom background-color, text, textColor, width, and height
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!',
});
`
[Powered by https://picsum.photos]

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