@thisismanta/react-playbook/lib/PlaybookState.js

**Playbook** is a UI library made for listing React components.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.setPlaybookState = setPlaybookState;
exports.usePlaybookState = usePlaybookState;
const react_1 = require("react");
const __id = 'react-playbook';
window.__playbookState = new Map();
function setPlaybookState(name, value) {
    window.__playbookState.set(name, value);
    for (const contentWindow of Array.from(window.frames)) {
        contentWindow.postMessage({ __id, name, value }, '*');
    }
}
function usePlaybookState(name, defaultValue) {
    const [value, setValue] = (0, react_1.useState)(defaultValue);
    (0, react_1.useEffect)(() => {
        if (window.opener && window.opener.__playbookState?.has(name)) {
            setValue(window.opener.__playbookState.get(name));
        }
        else if (window.parent && window.parent.__playbookState?.has(name)) {
            setValue(window.parent.__playbookState.get(name));
        }
        else {
            setValue(defaultValue);
        }
        const onMessage = (e) => {
            if (e.data && e.data.__id === __id && e.data.name === name) {
                setValue(e.data.value);
            }
        };
        window.addEventListener('message', onMessage, false);
        return () => {
            window.removeEventListener('message', onMessage);
        };
    }, [name]);
    return value;
}