Mention

Componente de entrada para mencionar usuarios, etiquetas u otras entidades con sugerencias de autocompletado.

Importar

import { Mention } from 'asterui'

Ejemplos

Mention Básico

Entrada de mención simple con activador @.

</>

import { Mention } from 'asterui'
import { useState } from 'react'

function App() {
  const users = [
    { value: 'john', label: 'John Doe' },
    { value: 'jane', label: 'Jane Smith' },
    { value: 'bob', label: 'Bob Johnson' },
    { value: 'alice', label: 'Alice Williams' },
  ]
  
  const [text, setText] = useState('')
  
  return (
      <div>
        <Mention
          options={users}
          value={text}
          onChange={setText}
          placeholder="Type @ to mention someone"
        />
        <div className="mt-2 text-sm text-base-content/70">
          Text: {text || '(empty)'}
        </div>
      </div>
    )
}

export default App

Prefijo Personalizado

Usando prefijo # para menciones de hashtag.

</>

import { Mention } from 'asterui'
import { useState } from 'react'

function App() {
  const tags = [
    { value: 'react', label: 'React' },
    { value: 'typescript', label: 'TypeScript' },
    { value: 'javascript', label: 'JavaScript' },
    { value: 'webdev', label: 'Web Development' },
  ]
  
  const [text, setText] = useState('')
  
  return (
      <div>
        <Mention
          options={tags}
          value={text}
          onChange={setText}
          prefix="#"
          placeholder="Type # to add hashtag"
        />
        <div className="mt-2 text-sm text-base-content/70">
          Text: {text || '(empty)'}
        </div>
      </div>
    )
}

export default App

Múltiples Activadores

Usando múltiples componentes de mención con diferentes prefijos.

</>

import { Mention, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const users = [
    { value: 'john', label: 'John Doe' },
    { value: 'jane', label: 'Jane Smith' },
    { value: 'bob', label: 'Bob Johnson' },
    { value: 'alice', label: 'Alice Williams' },
  ]
  
  const tags = [
    { value: 'react', label: 'React' },
    { value: 'typescript', label: 'TypeScript' },
    { value: 'javascript', label: 'JavaScript' },
    { value: 'webdev', label: 'Web Development' },
  ]
  
  const [userText, setUserText] = useState('')
  const [tagText, setTagText] = useState('')
  
  return (
      <Space direction="vertical" size="md">
        <div>
          <label className="block mb-2 text-sm font-medium">
            Mention Users (@)
          </label>
          <Mention
            options={users}
            value={userText}
            onChange={setUserText}
            prefix="@"
            placeholder="Type @ to mention users"
          />
          <div className="mt-1 text-xs text-base-content/70">
            {userText || '(empty)'}
          </div>
        </div>
  
        <div>
          <label className="block mb-2 text-sm font-medium">
            Add Tags (#)
          </label>
          <Mention
            options={tags}
            value={tagText}
            onChange={setTagText}
            prefix="#"
            placeholder="Type # to add tags"
          />
          <div className="mt-1 text-xs text-base-content/70">
            {tagText || '(empty)'}
          </div>
        </div>
      </Space>
    )
}

export default App

API

Mention

Propiedad	Descripción	Tipo	Predeterminado
options	Array de opciones de mención	Array<{ value: string, label: string }>	-
value	Valor controlado	string	-
onChange	Callback cuando cambia el valor	(value: string) => void	-
prefix	Carácter que activa las sugerencias de mención	string	'@'
split	Carácter usado para dividir menciones en la entrada	string	-
placeholder	Texto de marcador de posición de entrada	string	-
disabled	Deshabilitar la entrada de mención	boolean	false
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Navegación por Teclado

• ↑ / ↓ - Navega a través de sugerencias de mención
• Enter - Selecciona la mención resaltada
• Esc - Cierra el menú desplegable de mención

Accesibilidad

• Soporte completo de navegación por teclado para seleccionar menciones
• Atributos ARIA para que los lectores de pantalla anuncien sugerencias
• Gestión del foco cuando el menú desplegable se abre y cierra
• Indicadores visuales claros para elementos seleccionados y enfocados