How to access ReactQuill api?

Question

I need to access <ReactQuill/> with button. For instance I click buttons and remove or save content of ReactQuill. But i cannot understand how to properly get access of functions of ReactQuill in React. In example they propose to use quill variable to access functions of this component. For instance remove content of component quill.setContents([{ insert: '\n' }]) But the question is how to properly define it?

I tried to do it like in some examples but it didn't work.

const [quill, setQuill] = useState(null);

       <ReactQuill
        style={{height: '45vh', marginBottom: '1px'}}
        ref={(el) => {
         setQuill(el)
        }}
      />
 
     <Button type="primary" icon={<DeleteOutlined />} 
       onClick={()=> 
        quill.setContents([{ insert: '\n' }])}
      >Clear</Button>

Maybe anyone knows how to properly define their quill variable? I was going through their documentation but, it didn't help.

Answer 1

use ref instead of useState

const quill = useRef();

<ReactQuill
    style={{height: '45vh', marginBottom: '1px'}}
    ref={quill}
/>

<Button type="primary" icon={<DeleteOutlined />} 
    onClick={()=> 
    quill.current.editor.insertText(0, "text")}
>Clear</Button>