How do we type forwardRef in a Nextjs dynamic import?

LayTexas 0
Viewed 16

There's my code. I need to type the forwardRef but I'm not getting it, in fact I don't know exactly where to type it. Can someone help me? I'm getting the errors

  1. Property 'forwardedRef' does not exist on type '{}'.

  2. Type '{ forwardedRef: MutableRefObject; }' is not assignable to type 'IntrinsicAttributes'. Property 'forwardedRef' does not exist on type 'IntrinsicAttributes'.

    import type { NextPage } from "next";
    import dynamic from "next/dynamic";
    import { useRef } from "react";
    
    import "react-quill/dist/quill.snow.css";
    
    const ReactQuill = dynamic(
      async () => {
        const { default: RQ } = await import("react-quill");
    
        return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
      },
      {
        ssr: false,
      }
    );
    
    const Home: NextPage = () => {
      const quillRef = useRef(null);
    
      return <ReactQuill forwardedRef={quillRef} />;
    };
    
    export default Home;
typescript-typings next.js typescript
1 Answers
import type { NextPage } from "next";
import dynamic from "next/dynamic";
import { LegacyRef, useRef } from "react";
import ReactQuill from "react-quill";

import "react-quill/dist/quill.snow.css";

interface IWrappedComponent {
  forwardedRef: LegacyRef<ReactQuill>;
}

const QuillNoSSRWrapper = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");

    const QuillJS = ({ forwardedRef, ...props }: IWrappedComponent) => (
      <RQ ref={forwardedRef} {...props} />
    );
    return QuillJS;
  },
  { ssr: false }
);

const Home: NextPage = () => {
  const node = useRef<ReactQuill>(null);

  return <QuillNoSSRWrapper forwardedRef={node} />;
};

export default Home;
LayTexas0
Related