Preact support

[mischa-s]

Thanks for creating/mainting this great library. I tried to use it on a Preact project today and it seems like it does not work. I have dug around a bit in the src code but have been unable to discover the cause of this.

Steps to reproduce:

1. Spin up basic Preact app
2. Copy in the code and supporting files for SingleLine.js
3. Type some text into the box and try to use the @mention functionality

Expected behaviour: The @mentions would load using Preact

Observed behaviour: The input element loads and accepts text, however the @mentions suggestions list does not render in the DOM

Workaround: Changing the Preact import to React works immediately

[mischa-s]

(should also mention I am mostly leaving this here for future people who might run into this issue and search for it in the issues given I am not sure how difficult it will be to fix)

[StanBright]

Thanks @mischa-s. I was already "wrestling" with this and loosing time. I think I will just disable preact :/

[dalatiyousef]

Experiencing same issue with preact, also want to mention that the list dose not ope and when you blur and focus again and type something the text gets duplicated as in if you have "123" then you blur and focused and pressed "x" it will be "123123"

here is a code example:

import { h } from 'preact'
import { useState } from 'preact/hooks'

import { MentionsInput, Mention } from 'react-mentions';

const data = [
  {id: 'walter', display: 'Walter'},
  {id: 'sam', display: 'Sam'},
  {id: 'john', display: 'John'},
  {id: 'elvis', display: 'Elvis'},
];

const ChatInput = () => {
  const [value, setValue] = useState('sample text');

  const onAdd = (item) => {
    console.error({ item });
  }

  const displayTransform = (id, display) => {
    return `@${display}`;
  }

  return (
    <div className="single-line">
      <MentionsInput
        singleLine
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Mention people using '@'"
        a11ySuggestionsListLabel="Suggested mentions"
      >
        <Mention data={data} onAdd={onAdd} displayTransform={displayTransform} />
      </MentionsInput>
    </div>
  )
}

export default ChatInput;

[jackblackCH]

+1 NextJS does replace react with preact for production builds. So it's not usable with NextJS.

[venits]

Here is the working Preact version of the library 👍 https://github.com/venits/react-mentions-preact