Removing Toolbar about react-quill HOT 8 CLOSED

You can now pass false to the toolbar prop to disable it completely.

from react-quill.

you can fix:
Editor.modules = {
toolbar: false,
};

from react-quill.

Bug: when toolbar prop changes, the editor loses focus.
For example, if I want to hide the toolbar until I click on the editor, I have to click on the editor, then click again to start editing.

from react-quill.

import React, { useState } from 'react'
import ReactQuill from 'react-quill'; // ES6
import 'react-quill/dist/quill.snow.css';
export default function Editorhtml() {
const [value, setValue] = useState('')
const changevalue = e => {
setValue(e)
}
const modules = {
toolbar: false
}
console.log(value)
return (
<ReactQuill value={value} modules={modules} placeholder={'Deskripsi produk'}
onChange={changevalue} />
)
}

from react-quill.

I found a way to do it, I just called the toolbar class (ql-toolbar and set it to display: none !important when it's inside of certain divs.

from react-quill.

I should provide you with a better, official way to disable the toolbar. Stay tuned.

from react-quill.

@brucedlukens I disabled the toolbar by using css to set display to none for react-quill edit boxes with a specific file name

actually sass:

  div.blurred-editor div.ql-toolbar
    display: none

I made a variable in the state called focused
when rendering ReactQuill I set the className dependent on the state

<ReactQuill
     className={this.state.focused ? "focused-editor" : "blurred-editor"}
     value={"yada yada yada"}
     theme="snow"/>

when the user focuses on the container component of react quill, I this.setState({focused: true})
when the user blurs on the container component of react quill, I this.setState({focused: false})

from react-quill.

how can i enable and disable toolbar dynamically ?

from react-quill.