Hi everyone,

I have been trying to add react-quill to my application but for some reason I have not been able to succeed.
I can add the toolbar but it shows up like this:
1132×180 3.24 KB

If I then add theme=“snow” to the component it looks like this:
1140×222 4.23 KB

This is my code at the moment:

import ReactQuill from 'react-quill';
export default class AddSpark extends Component {
  constructor(props) {
    super(props);
    _quillModules: {
      toolbar: [ 
          [{ 'header': [1, 2, false] }],
          ['bold', 'italic', 'underline','strike', 'blockquote'],
          [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}], 
          ['link', 'image'], 
          ['clean'] 
      /* ... other modules */
    _quillFormats: [ 
        "header",
        "bold", "italic", "underline", "strike", "blockquote",
        "list", "bullet", "indent",
        "link", "image" 
and my quill component:
            <ControlLabel>Content</ControlLabel>
              <div className='_quill'>
                <ReactQuill 
                  theme= 'snow'
                  value={this.state.value}
                  modules={this._quillModules}
                  formats={this._quillFormats} 
                  ref={(input) => this.content = input}>
                  <div key="editor"
                    ref="editor"
                    className="quill-contents border_solid_top"
                    dangerouslySetInnerHTML={{__html:this.state.editorContent}} />
                </ReactQuill>
I really would love to have a toolbar as we have here, it looks amazing and works just the way I would like mine to work.
Anyone any idea what I am doing wrong?
Cheers,

Dominic
          
With the help of @a.com I managed to solve this.
It turned out it had to do with the way it was added in package.json.
If someone else runs into this problem check how it added there.

In my project I had in my package.json file something like this:

“react-quill”: “version number”
But in an other project there was :

“react-quill”: “git+https://github.com/zenoamaro/react-quill.git”
After making the change and running npm install again it worked!
Thnk @a.com!
          
I’ve got react-quill working fine, I’m trying to change the toolbar, but it always shows the default toolbar. Any suggestions?
constructor(props) {
		super(props);
		this.state = {
			editorHtml: ''
		this.handleChange = this.handleChange.bind(this);
	modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{'list': 'ordered'}, {'list': 'bullet'}],
      ['link']
  formats: [
    'bold', 'italic', 'underline',
    'list', 'bullet',
    'link'
And this is the component:
<ReactQuill
	 theme={'snow'}
	 ref="comment"
	 id={Session.get('commentId')}
	 onChange={this.handleChange}
	 value={this.state.editorHtml}
	 modules={this.modules}
	 formats={this.formats}
	 placeholder="add your comment here"