Compound Components

Control layout while the library handles state, ARIA, and keyboard navigation.

Basic Structure

import { Mentions } from "@skyastrall/mentions-react";

<Mentions triggers={triggers}>
  <Mentions.Editor placeholder="Type @..." className="my-editor" />
  <Mentions.Portal>
    <Mentions.List>
      <Mentions.Item />
    </Mentions.List>
  </Mentions.Portal>
</Mentions>

Custom Item Rendering

Use the render prop for full control over how items display.

<Mentions.Item render={({ item, highlighted }) => (
  <div style={{
    display: "flex",
    alignItems: "center",
    gap: 8,
    fontWeight: highlighted ? 600 : 400,
  }}>
    <img src={item.avatar} width={24} height={24} style={{ borderRadius: "50%" }} />
    <div>
      <div>{item.label}</div>
      <div style={{ fontSize: 12, opacity: 0.6 }}>{item.role}</div>
    </div>
  </div>
)} />

Manual Item Mapping

For full control over item iteration, pass index explicitly.

<Mentions triggers={triggers}>
  <Mentions.Editor />
  <Mentions.Portal>
    <Mentions.List>
      {items.map((item, i) => (
        <Mentions.Item key={item.id} index={i}>
          {item.label}
        </Mentions.Item>
      ))}
    </Mentions.List>
  </Mentions.Portal>
</Mentions>

Loading and Empty States

<Mentions.List>
  <Mentions.Loading>
    <Spinner /> Searching...
  </Mentions.Loading>
  <Mentions.Empty>
    No results found
  </Mentions.Empty>
  <Mentions.Item render={({ item }) => item.label} />
</Mentions.List>

Portal Container

By default, the dropdown renders inline inside the component. To portal elsewhere:

<Mentions.Portal container={document.body}>
  <Mentions.List>...</Mentions.List>
</Mentions.Portal>