iframe-element-picker

A library that facilitates element picking on a web app and provides a communication channel for a parent to get the picked element through a cross-origin iframe.

Usage

Parent

Initialize

import { Parent as IframeElementPickerParent } from "@draftbit/iframe-element-picker";

IframeElementPickerParent.init(
  "https://<IFRAME_CHILD_URL>",
  (element) => {
    // Handle the selected element
  },
  iframeElement, // The iframe element that contains the child
);

Start element selection

IframeElementPickerParent.startChildElementSelection();

Stop element selection

IframeElementPickerParent.stopChildElementSelection();

Cleanup

When selection is no longer needed, call the cleanup function to remove the event listeners and clean up the state. After cleanup is called, init can be called again to restart the process.

IframeElementPickerParent.cleanup();

Child

The child only needs to be initialized with the parent's URL. All other functionality is triggered by the parent.

import { Child as IframeElementPickerChild } from "@draftbit/iframe-element-picker";

IframeElementPickerChild.init("https://<IFRAME_PARENT_URL>");

Cleanup

When selection is no longer needed, call the cleanup function to remove the event listeners and clean up the state.

IframeElementPickerChild.cleanup();