Search code examples
javascriptreactjsace-editor

Setting showPrintMargin to false not working in React Ace Editor

I'm trying to remove the vertical line in my react ace editor: enter image description here

I've tried setting the printMargin to false but it doesn't seem to be working. Tried restarting the server too but nothing. I'm also using next.js if that helps.

Here is what that code looks like:

import ReactAce from "react-ace-editor";
import React from "react";

    function CodeEditor(props) {
      return (
        <ReactAce
          value={`function onLoad(editor) {
          console.log("i've loaded");
        }`}
          mode="javascript"
          theme="xcode"
          showPrintMargin={false}
          setReadOnly={false}
          setValue={props.value}
          style={{
            height: "500px",
            fontSize: "16px",
          }}
        />
      );
    }
    export default CodeEditor;
Solution

  • You're using react-ace-editor npm package, which is not the original package for react-ace. that's probably why that option is not supported. instead you should use react-ace:

    import ReactAce from 'react-ace';

    Then it'll work, like this stackblitz demo .

    (uncomment the showPrintMargin option to see the change.)