@molecule/app-exif-panel-react

EXIF metadata panel for photo-sharing apps.

Exports <ExifPanel> — a structured renderer for already-parsed EXIF data (camera, lens, aperture, shutter, ISO, focal length, GPS, timestamp, software, copyright). The caller is responsible for decoding the raw EXIF payload (e.g. via the exifr library); this package is a styling-agnostic, i18n-aware renderer only.

Also exports the ExifData and ExifPanelProps types and the pure formatting helpers (formatAperture, formatShutter, formatIso, formatFocalLength, formatGps, formatTimestamp, formatCamera, buildMapLink, formatDms).

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { ExifPanel } from '@molecule/app-exif-panel-react'

function PhotoMetadata({ exif }) {
  return <ExifPanel exif={exif} showGps compact={false} />
}

Type

feature

Installation

npm install @molecule/app-exif-panel-react @molecule/app-i18n @molecule/app-react @molecule/app-ui react
npm install -D @types/react

API

Interfaces

ExifData

Parsed EXIF metadata. Every field is optional — extra fields are permitted (the renderer ignores them) so callers can pass through the full output of their EXIF parser without filtering.

interface ExifData {
  /** Camera manufacturer (e.g. `"Canon"`, `"Sony"`, `"Apple"`). */
  make?: string
  /** Camera model (e.g. `"EOS R5"`, `"a7 III"`, `"iPhone 15 Pro"`). */
  model?: string
  /** Lens model description (e.g. `"RF 24-70mm F2.8 L IS USM"`). */
  lensModel?: string
  /** Aperture as an f-number (the `N` in `f/N`). */
  fNumber?: number
  /** Exposure / shutter time in seconds (e.g. `0.008` ≈ `1/125 s`). */
  exposureTime?: number
  /** ISO sensitivity (e.g. `100`, `1600`). */
  iso?: number
  /** Focal length in millimetres. */
  focalLength?: number
  /** 35 mm-equivalent focal length, when supplied by the camera. */
  focalLength35mm?: number
  /** Capture timestamp — `Date`, ISO 8601 string, or epoch millis. */
  dateTimeOriginal?: Date | string | number
  /** GPS latitude in signed decimal degrees. */
  gpsLatitude?: number
  /** GPS longitude in signed decimal degrees. */
  gpsLongitude?: number
  /** EXIF orientation tag (1–8). */
  orientation?: number
  /** Software / firmware that produced the file. */
  software?: string
  /** Copyright statement embedded in the file. */
  copyright?: string
  /** Pass-through for parser-specific extras the renderer ignores. */
  [key: string]: unknown
}

ExifPanelProps

Props for the <ExifPanel> component.

interface ExifPanelProps {
  /** Parsed EXIF metadata. */
  exif: ExifData
  /**
   * Compact mode collapses the panel into a single condensed grid with
   * smaller type and tighter spacing. Defaults to `false`.
   */
  compact?: boolean
  /**
   * Whether to render the GPS coordinates row when latitude / longitude
   * are present. Defaults to `true`.
   */
  showGps?: boolean
  /** Optional heading override. */
  heading?: string
  /** Extra classes appended to the panel root. */
  className?: string
}

Functions

ExifPanel(props)

Render parsed EXIF metadata as a structured panel — camera, lens, exposure (aperture + shutter + ISO + focal length), GPS (with optional map link), and capture timestamp.

The component is purely presentational: callers parse the binary EXIF payload elsewhere (e.g. via the exifr library) and pass the normalized ExifPanelProps.exif object in. Empty / undefined fields are silently skipped.

All styling resolves through getClassMap() and all user-facing text resolves through useTranslation() — no hardcoded UI strings or styling-library class names.

function ExifPanel(
  props: ExifPanelProps,
): ReactElement<unknown, string | JSXElementConstructor<any>>

• props — ExifPanelProps.

Returns: The rendered panel element.

formatAperture(fNumber)

Format an aperture f-number as f/N with one decimal place dropped when whole.

function formatAperture(fNumber: number | undefined): string | null

• fNumber — The aperture value (e.g. 2.8, 5.6, 8).

Returns: A display string like "f/2.8" or "f/8", or null when the input is missing / invalid.

formatShutter(seconds)

Format a shutter / exposure time in seconds as a human-readable string. Sub-second times are rendered as a 1/x s reciprocal with the denominator rounded; longer exposures stay in seconds.

function formatShutter(seconds: number | undefined): string | null

• seconds — Exposure time in seconds.

Returns: A display string like "1/125 s" or "2 s", or null when the input is missing / invalid.

formatIso(iso)

Format an ISO sensitivity as ISO N.

function formatIso(iso: number | undefined): string | null

• iso — The ISO value (e.g. 100, 1600).

Returns: A display string like "ISO 1600", or null when missing.

formatFocalLength(mm)

Format a focal length value as N mm.

function formatFocalLength(mm: number | undefined): string | null

• mm — Focal length in millimetres.

Returns: A display string like "50 mm", or null when missing.

formatDms(value, axis)

Format a single GPS coordinate (latitude or longitude) as deg/min/sec with a hemisphere suffix.

function formatDms(value: number | undefined, axis: 'lat' | 'lon'): string | null

• value — Signed decimal degrees.
• axis — Which axis the value represents — picks N/S vs E/W.

Returns: A string like "37° 25' 19.07" N", or null when missing.

formatGps(latitude, longitude)

Format a GPS coordinate pair as a single deg/min/sec string.

function formatGps(latitude: number | undefined, longitude: number | undefined): string | null

• latitude — Latitude in signed decimal degrees.
• longitude — Longitude in signed decimal degrees.

Returns: A combined string like "37° 25' 19.07" N, 122° 5' 4.16" W", or null if either value is missing.

buildMapLink(latitude, longitude)

Build an OpenStreetMap link URL for a GPS coordinate pair.

function buildMapLink(latitude: number | undefined, longitude: number | undefined): string | null

• latitude — Latitude in signed decimal degrees.
• longitude — Longitude in signed decimal degrees.

Returns: An https://www.openstreetmap.org/?... URL, or null when either input is missing.

formatTimestamp(value)

Format an EXIF capture timestamp. Accepts Date, ISO string, or epoch milliseconds and renders via toLocaleString so the result respects the host environment's locale and timezone.

function formatTimestamp(value: string | number | Date | undefined): string | null

• value — The timestamp value pulled from EXIF.

Returns: A locale-formatted date/time string, or null when missing or unparseable.

formatCamera(make, model)

Compose camera make + model into a single "Make Model" string, collapsing duplication when the model already starts with the make (Sony often does this).

function formatCamera(make: string | undefined, model: string | undefined): string | null

• make — Camera manufacturer.
• model — Camera model.

Returns: The combined label, or null when both inputs are missing.

Injection Notes

Requirements

Peer dependencies:

• @molecule/app-i18n ^1.0.1
• @molecule/app-react ^1.0.1
• @molecule/app-ui ^1.0.1
• react ^18.0.0 || ^19.0.0

Runtime Dependencies

• @molecule/app-i18n
• @molecule/app-react
• @molecule/app-ui
• react

Translations

Translation strings are provided by @molecule/app-locales-exif-panel.