# @fireimg/react

React components for optimized FireImg images. Wraps image URLs and optional transforms in a simple component.

npm install @fireimg/react @fireimg/js

@fireimg/react depends on @fireimg/js for URL building.

Use the FireImg component with your image key (and optional project override and transform props). You can set the default project once with configureFireimg so you don’t need to pass project on every component:

import { FireImg, configureFireimg } from '@fireimg/react';

// Optional: set default project for all <FireImg> components
configureFireimg({ project: 'your-project-id' });

function MyImage() {
  return (
    <FireImg
      imageKey="uploads/photo.jpg"
      width={800}
      alt="My photo"
    />
  );
}

The component renders an <img> with the optimized FireImg URL. URLs use the path-based variant segment from @fireimg/js (recommended token order: width, height, quality, fmt, fit, pos — see the Image URL reference). Supported props include imageKey, project (optional override), width, height, quality, fmt, fit, pos, snapStep, minWidth, maxWidth, and standard <img> attributes. See the package README and types for full details.

• npm
• Source (GitHub)