Sizing and Resizing

quip.apps.getCurrentDimensions​

Function() => {width: number, height: number}

Returns the current width and height of this app instance.

quip.apps.forceUpdateDimensions​

Function() => void

Forces an immediate update of the app's dimensions. Updates will automatically happen in response to the app's DOM mutations, so this should only be used in special cases where the update needs to happen immediately.

quip.apps.setWidthAndAspectRatio​

Function(width: number, aspectRatio?: number) => void

Only available to apps with "scale" sizing. Tells the container the desired width and aspect ratio of the app. The width is saved, but does not affect the view since users are able to resize scale-sizing apps with columns. Passing along an updated aspect ratio (height / width) is critical if your app wants to change its shape. Otherwise, the container could improperly cutoff content or take up too much space in the document.

quip.apps.enableResizing​

Function() => void

Shows a drag handle for resizing when the app is focused. Resizing can only be enabled for apps with "scale" sizing.

quip.apps.disableResizing​

Function() => void

Hides the drag handle shown from quip.apps.enableResizing(). Has no effect if quip.apps.enableResizing() has not been called.

Example​

class MyComponent extends React.Component {

    componentDidMount() {
        quip.apps.enableResizing();
    }

    render() {
        return <div>Resize Me!</div>;
    }
}

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

class MyComponent extends React.Component {

    componentDidMount() {
        quip.apps.enableResizing();
    }

    render() {
        return <div>Resize Me!</div>;
    }
}

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