Placeholder React Components

placeholder-image.js

function PlaceholderImage({
	height,
	width,
	...consumerProps
}) {
	return (
		<img
			{...consumerProps}
			alt=""
			src={`https://placehold.co/${width}x${height}.png`}
		/>
	);
}

placeholder-text.js

const lipsum =
	'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quo voluptas fugit quidem nemo autem eos reprehenderit voluptatum nam. Error odio repellendus quisquam magni rerum hic facere laboriosam, aspernatur fugiat.';

function PlaceholderText({
	characters,
	...consumerProps
}) {
	const string =
		characters <= lipsum.length
			? lipsum.slice(0, characters)
			: lipsum
					.repeat(Math.ceil(characters / lipsum.length))
					.slice(0, characters);

	return (
		<span
			{...consumerProps}
			style={{
				backgroundImage:
					'repeating-linear-gradient(to bottom, #fff 0px, #fff 2px, #bbb 2px, #bbb 10px, #fff 10px, #fff 18px)',
				display: 'inline-block',
				fontSize: 12,
				lineHeight: 1,
			}}
		>
			<span style={{ visibility: 'hidden' }}>{string}</span>
		</span>
	);
}