Playground

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

<Mentions
  triggers={[
    { char: "@", data: users, color: "rgba(99,102,241,0.25)" },
    { char: "#", data: tags, color: "rgba(16,185,129,0.25)" },
    { char: "/", data: commands, color: "rgba(245,158,11,0.25)" }
  ]}
  placeholder="Type @ # or / to try it out..."
  onChange={(markup, plainText) => { /* handle */ }}
/>