Skip to main content
Version: 1.x.x

Showing UI Beyond the App Boundaries

quip.apps.addDetachedNode​

Function(node: HTMLElement) => void

Register a node as being "detached" from the app container and thus possibly extending outside of it. The host will make a best effort to still display such nodes and allow user interaction with them when the app has focus (but may disallow it if it presents a click-jacking risk).

Example​


class MyComponent extends React.Component {

    private buttonRef = React.createRef();

    private addNode = (e: React.MouseEvent<HTMLButtonElement>) => {
        if (this.buttonRef.current) {
            quip.apps.addDetachedNode(this.buttonRef.current);
        }
    }

    private removeNode = (e: React.MouseEvent<HTMLButtonElement>) => {
        if (this.buttonRef.current) {
            quip.apps.removeDetachedNode(this.buttonRef.current);
        }
    }

    private handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        console.log("Button clicked!");
    }

    render() {
        // The style attributes will force the DOM element
        // to be rendered outside the container of the live app.
        // Hence it will not be user interactable unless it is
        // added as a detached node.
        const style: React.CSSProperties = {
            position: "absolute",
            top: "100%",
            left: 0,
        };
        return <div>
            <button onClick={this.addNode}>
                Add Detached Node
            </button>
            <button onClick={this.removeNode}>
                Remove Detached Node
            </button>
            <button
                ref={this.buttonRef}
                style={style}
                onClick={this.handleClick}>
                    Click Me!
            </button>
        </div>;
    }
}

quip.apps.initialize({
    initializationCallback: (root, params) => {
        ReactDOM.render(<MyComponent />, root);
    },
});