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;
}