Necesito mostrar una lista o menú desplegable cuando el usuario ingresa un carácter específico como '@' o '{{ }}' en el área de texto de entrada, desde el cual se puede seleccionar una opción y luego usarla en el área de texto. ¿Hay alguna biblioteca específica para esto en React.js? ¿O alguna solución corta para esto en React?
Puede monitorear la entrada desde el área de texto y verificar el carácter específico con una expresión regular. Use un estado que monte un componente con sugerencias cuando sea verdadero. Seleccionar una opción la insertaría en el texto y establecería el estado de montaje en falso. Hacer clic debería hacer lo mismo (y MUI incluye un componente auxiliar de escucha de clic).
Aquí hay una pequeña demostración como prueba de concepto: https://codesandbox.io/s/magical-browser-dk981?file=/src/App.tsx
Nota: he usado Recoil para administrar el estado compartido, porque me gusta mucho. Si no desea utilizar Recoil, debe declarar todo el estado en el componente principal y pasarlo como apoyo al elemento secundario.
Obviamente, esta demostración no está pulida, no hay sugerencias inteligentes a medida que escribe, tendrá que implementarlas usted mismo. Buena suerte. :)