Bee-plugin-official icon indicating copy to clipboard operation
Bee-plugin-official copied to clipboard

Request: React "ref" integration

Open fabdrol opened this issue 3 years ago • 2 comments

Currently, bee plugin requires a string ID of the div that will contain the editor. This is difficult when working in React, for instance. Feature request is to make it possible to attach bee plugin directly to a dom node

fabdrol avatar Apr 14 '21 14:04 fabdrol

I would find this useful as well.

At the moment, the plugin accepts a container option of type string and presumably does something similar to document.findElementById(`#${container}`) to find the element.

This would be a request for container to accept string | Element, and if an Element is provided, use that directly.

For example:

var el = typeof container === "string" ? document.findElementById(`#${container}`) : container;

BenJenkinson avatar Dec 13 '21 14:12 BenJenkinson

Hi @fabdrol and @BenJenkinson - In our React demo we use the following JSX:

<div id="bee-plugin-container" />

and this is the static configuration we import:

{ container: 'bee-plugin-container', language: 'en-US', ... }

We've run into some friction points, and we may do a React wrapper at some point, but the id hasn't presented any issues yet. I thought it may be more challenging to set a ref at the component level, null until rendering, and then pass it into BEE. You'd need to reset the new ref each time the component mounts. Can you elaborate on where you've found the difficulties so we can deep dive into this?

mattweberio avatar Jan 05 '22 01:01 mattweberio