How to remove minimap, scrollbar in Monaco editor and how to disable writing in Monaco editor in react js?

Question

I am using Monaco editor with react. It's working fine. But I want to remove the minimap and scrollbar in it. How can I remove them? And I want to disable editing in it. How can I achieve these functionalities? Please check the image for reference -

Code:

import Editor from "@monaco-editor/react";


export default function TwoSum() {

    return (
        <div>

            {/* Coding Page Content */}
            <div className="lg:flex h-full lg:w-12/12 lg:mx-2 mt-12 lg:py-4">
                {/* Coding Main Content Start */}
                <div className="lg:w-6/12 lg:pr-6 fixed overflow-scroll h-full pb-40">
                   // social 


                </div>
                {/* Coding Main Content End */}

                {/* Coding Right Sidebar Start */}
                <div className="lg:w-6/12 lg:pl-4 h-full px-2 mt-2 lg:mt-0 lg:px-0 absolute right-0">
                    
                    <Editor
                        height="80vh"
                        defaultLanguage="javascript"
                        defaultValue= {code}
                        className=" overflow-hidden"
                        readOnly = {true}
                        // minimap={enabled = false}
                        // scrollbar={vertical = "hidden"}
                        
                    />

                    
                </div>
                {/* Coding Rightsidebar End */}
            </div>

        </div>
    )
}


const code = 
`Here is my code ...
`

Answer 1

When you create the editor, you can specify many options that control the behaviour and display of it:

        const options: Monaco.IStandaloneEditorConstructionOptions = {
            readOnly: false,
            minimap: { enabled: false },
            ...
        };

        this.editor = Monaco.create(this.hostRef.current, options);

This is using Monaco directly. For @monaco-editor/react you can specify the options as property:

        const options: Monaco.IStandaloneEditorConstructionOptions = {
            readOnly: false,
            minimap: { enabled: false },
            ...
        };

        <Editor
            height="80vh"
            defaultLanguage="javascript"
            defaultValue= {code}
            className=" overflow-hidden"
            options = {options}
        />

See also: https://www.npmjs.com/package/@monaco-editor/react#editor .