How to access ref in React-Quill dynamically import

Question

tried this

type Editor = ReactQuillProps & {
  forwardedRef?: React.ForwardedRef<any>;
};
const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");

    // eslint-disable-next-line react/display-name
    return ({ forwardedRef, ...props }: Editor) => (
      <RQ ref={forwardedRef} {...props} />
    );
  },
  {
    ssr: false,
  }
);

  <ReactQuill
    forwardedRef={quillRef}
    value={field.value}
    modules={modules}
    formats={formats}
    onChange={(content) => {
      field.onChange(content);
    }}
    theme="snow"
    defaultValue={""}
    placeholder="Write Here...."
    className="h-full text-base border-none"
    preserveWhitespace
    />

But it returns an error. I want to access the ref to implement the Copy to Clipboard

client.js?4d30:1 Warning: React Quill: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

How to access ref in React-Quill dynamically import

0 Answers0