React-quill: Multiple quill toolbars on the same page

[kurtwilliam]

Hello,

Is it possible to generate multiple custom quill toolbars on the same page, using custom HTML?

The first rendered toolbar works, but because it requires an ID to generate the toolbar in it won't work more than once. I suppose I am also asking for guidance on generating multiple ID's on the same page.

Thank you.

Update: I am able to generate a unique ID for each toolbar container using the react-html-id package (https://www.npmjs.com/package/react-html-id). Every time a new instance of the text editor is generated on the page it gives the toolbar an id along the lines of 'id-1-1' or 'id-1-2'. My issue is telling Quill where to find the toolbar - no matter what I try, I cannot sub the new ID into the module to find the container.

As an example, my class is called TextEditor and the nextUniqueId() function generates the new id. Outside of TextEditor I type:
TextEditor.modules = {
toolbar: {
container: '#' + {TextEditor.nextUniqueId()}
}
}
Which is invalid syntax. If I try to sub in a value with a variable, it returns an undefined error. Any suggestions?

[kurtwilliam]

I was able to have multiple toolbars on the same page by declaring this.modules inside the render as follows:
this.modules = {
toolbar: {
container: #${this.nextUniqueId()}
}
}

Hope this helps someone!