Unable to access ref on CodeEditor using NextJS dynamic #154

Activity

1. jaywcjlove commented on Jul 3, 2023

   

   jaywcjlove

   on Jul 3, 2023

   Member

   More actions

   • ref doesn't work with dynamically imported components vercel/next.js#4957
   • ref methods not working when using dynamic import with nextjs cookpete/react-player#1455

   @saleemameen I hope the above issue can help you, I can't help you.

   I tried some methods but none of them work

   https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-https-github-com-uiwjs-react-textarea-code-editor-issues-154-kpdvfm?file=/pages/index.js
2. saleemameen commented on Jul 3, 2023

   

   saleemameen

   on Jul 3, 2023

   Author

   More actions

   @jaywcjlove Thanks for your effort. I think I've managed to come up with a solution that works for anyone that's interested 😊 Please take a look and see if you can reproduce on your end, then maybe you can share in the docs for others?

   1. Create a component called WrappedEditor.tsx where you import the CodeEditor normally

   import { type Ref } from 'react';
   import CodeEditor, { type TextareaCodeEditorProps } from '@uiw/react-textarea-code-editor';
   
   interface WrappedEditorProps extends TextareaCodeEditorProps {
       editorRef: Ref<HTMLTextAreaElement> | undefined;
   }
   
   export default function WrappedEditorComponent({ editorRef, ...props }: WrappedEditorProps) {
       return <CodeEditor {...props} ref={editorRef} />;
   }

   2. Create a component called CodeEditor.tsx where you import the WrappedEditor component dynamically

   'use client';
   import dynamic from 'next/dynamic';
   import React, { useRef } from 'react';
   import '@uiw/react-textarea-code-editor/dist.css';
   
   const WrappedEditor = dynamic(() => import('./WrappedEditor'), {
       ssr: false,
   });
   
   export default function CodeEditor() {
       const editorRef = useRef<HTMLTextAreaElement | null>(null);
       const [code, setCode] = React.useState(`function add(a, b) {\n  return a + b;\n}`);
       console.log('editorRef', editorRef);
       return (
       <div>
   	<WrappedEditor
               value={code}
               language="js"
               placeholder="Please enter JS code."
               onChange={(evn) => setCode(evn.target.value)}
               padding={15}
               editorRef={editorRef}
               style={{
                   fontSize: 12,
                   backgroundColor: '#f5f5f5',
                   fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
               }}
   	/>
       </div>
   );
   }

   👍React with 👍1Reacted by 小弟调调