React Integration

Copy-paste React components and hooks for LoremFaces placeholder avatars.

Basic Usage

The simplest way to use LoremFaces in React - just use the URL directly:

function UserProfile() {
  return (
    <img
      src="https://www.loremfaces.net/96/id/1.jpg"
      alt="User avatar"
      width={96}
      height={96}
      style={{ borderRadius: '50%' }}
    />
  );
}

Reusable Avatar Component

A flexible component with props for size, ID, and styling:

interface AvatarProps {
  id?: 1 | 2 | 3 | 4 | 5;
  size?: 24 | 42 | 48 | 96 | 128 | 256;
  alt?: string;
  className?: string;
  random?: boolean;
}

function Avatar({
  id = 1,
  size = 96,
  alt = "User avatar",
  className,
  random = false
}: AvatarProps) {
  const src = random
    ? `https://www.loremfaces.net/${size}/random.jpg`
    : `https://www.loremfaces.net/${size}/id/${id}.jpg`;

  return (
    <img
      src={src}
      alt={alt}
      width={size}
      height={size}
      className={className}
      loading="lazy"
    />
  );
}

// Usage
<Avatar id={2} size={128} />
<Avatar random size={48} />

Custom Hook

A hook for generating avatar URLs programmatically:

function useLoremFaces() {
  const getUrl = (
    size: 24 | 42 | 48 | 96 | 128 | 256,
    id?: 1 | 2 | 3 | 4 | 5
  ) => {
    if (id) {
      return `https://www.loremfaces.net/${size}/id/${id}.jpg`;
    }
    return `https://www.loremfaces.net/${size}/random.jpg`;
  };

  return { getUrl };
}

// Usage
function UserList() {
  const { getUrl } = useLoremFaces();

  return (
    <div>
      {[1, 2, 3, 4, 5].map(id => (
        <img key={id} src={getUrl(48, id)} alt={`User ${id}`} />
      ))}
    </div>
  );
}

Avatar Stack Component

Display overlapping avatars like you see in team previews:

function AvatarStack({
  count = 5,
  size = 48
}: { count?: number; size?: number }) {
  return (
    <div style={{ display: 'flex' }}>
      {Array.from({ length: Math.min(count, 5) }, (_, i) => (
        <img
          key={i}
          src={`https://www.loremfaces.net/${size}/id/${i + 1}.jpg`}
          alt={`Team member ${i + 1}`}
          width={size}
          height={size}
          style={{
            borderRadius: '50%',
            border: '2px solid white',
            marginLeft: i === 0 ? 0 : -12,
          }}
        />
      ))}
    </div>
  );
}

// Usage
<AvatarStack count={4} size={42} />

With Error Fallback

Handle loading errors gracefully:

function Avatar({ id, size = 96 }) {
  const [error, setError] = useState(false);

  if (error) {
    return (
      <div
        style={{
          width: size,
          height: size,
          borderRadius: '50%',
          background: '#e0e0e0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        ?
      </div>
    );
  }

  return (
    <img
      src={`https://www.loremfaces.net/${size}/id/${id}.jpg`}
      alt="Avatar"
      width={size}
      height={size}
      onError={() => setError(true)}
      style={{ borderRadius: '50%' }}
    />
  );
}

With Styled Components

import styled from 'styled-components';

const StyledAvatar = styled.img<{ size: number }>`
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;

function Avatar({ id = 1, size = 96 }) {
  return (
    <StyledAvatar
      src={`https://www.loremfaces.net/${size}/id/${id}.jpg`}
      size={size}
      alt="User avatar"
    />
  );
}

Next Steps

Check out more integration guides:

• Vue 3 Integration
• Next.js with Image Optimization
• Full API Documentation