Components

MentionTextarea

A text field with @mention autocomplete.

A text field with @mention autocomplete. The menu opens on «@» and closes on a space; Enter and Tab insert the first match.

Example

import { MentionTextarea } from "@toimetdev/pathlogs-core";

<form action={addComment}>
  <MentionTextarea
    name="body"
    people={project.members}
    rows={3}
    placeholder="Type @ and start entering a name…"
  />
  <button type="submit">Send</button>
</form>

Insertion bypasses onChange, so the caret lands right after the inserted name instead of jumping to the end of the text.

Why ids and not text

Next to the field the component keeps a hidden input with the ids of everyone mentioned:

html

<input type="hidden" name="mentions" value="u1,u3" />

The hidden field's name is changed with the mentionsName prop, if mentions is already taken in your form.

Props

Prop	Type	Default	Description
`name`*	`string`	—	The field's name in the form.
`people`*	`{ id, name, image? }[]`	—	Who can be mentioned. Filtered by substring within the name.
`mentionsName`	`string`	`"mentions"`	The name of the hidden field holding comma-separated ids.
`limit`	`number`	`6`	How many matches to show.
`value / onValueChange`	`string / (value: string) => void`	—	External control of the value. Without them the component keeps it itself.
`rows`	`number`	`2`	The field height.
`placeholder`	`string`	—	The hint in an empty field.
`autoFocus`	`boolean`	—	Caret straight into the field — for a reply form opened by a click.

name*string

The field's name in the form.

people*{ id, name, image? }[]

Who can be mentioned. Filtered by substring within the name.

mentionsNamestring

defaults to: "mentions"

The name of the hidden field holding comma-separated ids.

limitnumber

defaults to: 6

How many matches to show.

value / onValueChangestring / (value: string) => void

External control of the value. Without them the component keeps it itself.

rowsnumber

defaults to: 2

The field height.

placeholderstring

The hint in an empty field.

autoFocusboolean

Caret straight into the field — for a reply form opened by a click.