Inlay Infolists for React

React renderer for Inlay read-only infolists

@inlayphp/infolists-react renders the read-only inlay.infolists.v1 contract from inlayphp/infolists. It supports dotted state, fallbacks, conditions, shared layouts, formatting, safe links/images, repeatable entries and accessible copy feedback.

Install

pnpm add @inlayphp/infolists-react @inlayphp/core react react-dom
composer require inlayphp/infolists

Basic use

import { Infolist } from '@inlayphp/infolists-react'
import type { InfolistResource } from '@inlayphp/infolists-react'

export function UserDetails({ details }: { details: InfolistResource }) {
  return <Infolist resource={details} />
}

The renderer resolves statePath against resource.data, then applies the entry default and placeholder/emptyValue. Repeatable child paths are resolved relative to each array item.

Slots

<Infolist
  resource={details}
  slots={{
    header: (resource) => <h1>{resource.data.name as string}</h1>,
    beforeSchema: <p>Account summary</p>,
    afterSchema: <AuditTrail />,
    footer: <small>Generated by InLay</small>,
  }}
/>

Each slot accepts a React node or a function receiving the complete resource.

Custom renderers

import type { InfolistComponentRenderer } from '@inlayphp/infolists-react'

const CardLayout: InfolistComponentRenderer = ({ component, renderSchema }) => (
  <section className="rounded-xl border p-4">
    <h2>{component.label}</h2>
    {renderSchema()}
  </section>
)

<Infolist
  resource={details}
  renderers={{ 'vendor-card': CardLayout }}
  registries={appInfolistRegistries}
/>

Local renderers override Core registries and built-ins. Community wire components should set rendererCategory: "layout" or "entry". Registry sets expose layout.get(type) and entry.get(type).

The renderer context contains component, path, resolved value, complete data, theme/classes, empty value and renderSchema(options). A layout can safely render a different schema, columns or nested path without losing the surrounding context.

Theme, classes and safe attributes

<Infolist
  resource={details}
  emptyValue={<em>Not provided</em>}
  theme={{ accent: '#7c3aed', radius: '0.75rem', surface: '#fff' }}
  classNames={{
    section: 'shadow-sm',
    label: 'uppercase tracking-wide',
    value: 'text-base',
  }}
/>

Theme keys are accent, radius, surface, text, muted, border, and danger; they become --inlay-infolist-* variables. Class slots are root, schema, layout, section, fieldset, callout, entry, label, value, helperText, tabs, wizard, repeatable, and empty.

Stable data-slot and data-entry attributes are also available. PHP extraAttributes are filtered to exclude event handlers, raw HTML, style, refs and React internals.

@source '../../node_modules/@inlayphp/*/src/**/*.{ts,tsx,vue}';

Built-in rendering

The adapter renders text/list/badge/date/number/money/link values, boolean/literal icons, images, colors, key/value data and repeatable schemas. @inlayphp/core checks URLs before anchors or images are rendered. navigator.clipboard powers copyable text/color entries with an ARIA live status.

Exports include Infolist, condition/path helpers, every resource/component/theme/class type and all renderer registry contracts.

Test, typecheck and build

pnpm test -- --run
pnpm typecheck
pnpm build

Related packages

• inlayphp/infolists, inlayphp/schemas, and inlayphp/support.
• @inlayphp/infolists-vue and @inlayphp/core.