Reactjs AceEditor.jsx simple ssr check

README.md

This is simple check for server ssr in case of window null. When doing the server and client prerender or ssr. Reactjs, vitejs, expressjs tested.

For react-ace editor or other editor.

AceEditor.jsx

import React, { useEffect, useState } from "react";

export default function AceEditor(props){

  const [Ace, SetAce] = useState(null);

  useEffect( async()=>{
    if (typeof window !== 'undefined') {//server ssr
      const ReactAce = await import("react-ace"); //load in order
      //await import("ace-builds/src-noconflict/mode-java"); //load in order
      //await import("ace-builds/src-noconflict/mode-javascript"); //load in order
      await import("ace-builds/src-noconflict/mode-jsx"); //load in order
      await import("ace-builds/src-noconflict/theme-github"); //load in order
      SetAce(ReactAce)// when all module is load then set ace editor.
    }
  },[])

  if(Ace){
    //console.log(Ace)
    const AceComp = Ace.default;
    return <AceComp {...props}/>
  }
  return null;
}