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
- Typescript
- Javascript
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);
},
});
class MyComponent extends React.Component {
buttonRef = React.createRef();
addNode = (e) => {
if (this.buttonRef.current) {
quip.apps.addDetachedNode(this.buttonRef.current);
}
}
removeNode = (e) => {
if (this.buttonRef.current) {
quip.apps.removeDetachedNode(this.buttonRef.current);
}
}
handleClick = (e) => {
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 = {
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);
},
});