signavio / react-mentions

@mention people in a textarea
https://react-mentions.vercel.app
Other
2.47k stars 573 forks source link

🙏 Provide renderInput callback for using component library #622

Closed Hideman85 closed 1 month ago

Hideman85 commented 2 years ago

It would be an amazing user experience if we could use our component library to render the input 🙏

import TextField from '@mui/material/TextField';

const renderInput = (props) => <TextField {...props} label='Comment...' />;

export const MentionsTextfield: FC<MentionsTextfieldProps> = ({ options, value, onChange, disabled }) => {
  const inputRef = useRef<HTMLElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return (
    <MentionsInput
      ref={inputRef}
      style={defaultStyleMentions}
      singleLine={false}
      disabled={disabled}
      value={value}
      onChange={onChange}
      renderInput={renderInput}
    >
      <Mention appendSpaceOnAdd displayTransform={(_, display) => `@${display} `} trigger='@' markup={MENTION_MARKUP} data={options} />
    </MentionsInput>
  );
};
gioragutt commented 5 months ago

There's an open PR by @taifen that solves this, let's bump it up 👍🏻