nextjs에서 react quill ref 타입스크립트에서 사용하기

nextjs에서 react quill ref 타입스크립트에서 사용하기

 

interface CustomReactQuillProps extends ReactQuillProps {
  forwardedRef: React.RefObject<ReactQuill>
}

const CustomReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill')
    const Quill = ({ forwardedRef, ...props }: CustomReactQuillProps) => (
      <RQ ref={forwardedRef} {...props} />
    )
    return Quill
  },
  { ssr: false }
)

const Editor = () => {
  const quillRef = useRef<ReactQuill>(null)
  const [value, setValue] = useState('')

  const imageHandler = useCallback(() => {
     ...
  }, [])

  const modules = useMemo(
    ...
  )

  const formats = useMemo(
    ...
  )

  return (
      <CustomReactQuill
        forwardedRef={quillRef}
        theme='snow'
        value={value}
        onChange={setValue}
        formats={formats}
        modules={modules}
      />
  )
}