Add-ons Component Library

Since your add-on cannot manipulate the DOM directly, nor can it render arbitrary HTML, we provide a component library that offers various User Interface controls and composable parts with which to build your add-on.

Use Uncontrolled Components

All interactions with your add-on are serialized and sent "down" to the Web Worker, and there can be a noticeable input delay when using controlled components. It is recommended that you use "uncontrolled" components where possible to eliminate input lag. That means utilizing the defaultValue option for all components and updating your add-on state based on callbacks.

Limitations of Add-ons

Since your add-on runs in a Web Worker apart from the main browser execution thread, there are limitations to what your add-on can do:

• No access to the DOM
• No access to document or window
• No support for React ref
• Your add-on cannot control the version of React
• Components only accept basic data types that are serializable, e.g. strings, numbers, true, false, null, and objects/arrays that contain those basic types.
• Functions passed as arguments are converted to async functions.
• No support for React "render functions."
• No support for passing React components in props.
• Certain React libraries will not work within the above confines, such as routing libraries.