Guides
Usage with React
Usage with React
integrating placeholders into your React components.
In React, you can use the image API directly in your `img` tags or creating a reusable component.
Reusable Image Component
function Placeholder({ width = 600, height = 400, ...props }) {
const src =
https://placehold.harshsandhu.com/api/img?w=${width}&h=${height}
return <img src={src} alt="Placeholder" {...props} />;
}
export default function App() {
return (
<div>
<h1>My App</h1>
<Placeholder width={800} height={200} className="rounded-lg" />
</div>
);
}Fetching Text (Hook)
import { useState, useEffect } from 'react';
function useLorem(count = 1) {
const [text, setText] = useState('');
useEffect(() => {
fetch(
https://placehold.harshsandhu.com/api/lorem?count=${count}
)
.then(res => res.text())
.then(data => setText(data));
}, [count]);
return text;
}