Skip to main content
Version: 1.x.x

Subscribing to Events

quip.apps.EventType

enum {
BLUR
FOCUS
CONTAINER_SIZE_UPDATE
USER_PREFERENCE_UPDATE
SITE_PREFERENCE_UPDATE
DOCUMENT_MEMBERS_LOADED
DOCUMENT_EDITABLE_CHANGED
ONLINE_STATUS_CHANGED
THREAD_MEMBERSHIP_CHANGED
}

BLUR

Event when the user switches focus away from this app instance in the document.

FOCUS

Event when the user switches focus to this app instance in the document.

CONTAINER_SIZE_UPDATE

Triggers when the container size for this app instance changes.

USER_PREFERENCE_UPDATE

Triggers when the UserPreferences for the viewing user are updated.

SITE_PREFERENCE_UPDATE

Triggers when the SitePreferences for the viewing user's site are updated.

DOCUMENT_MEMBERS_LOADED

Triggers when the list of document members for the current document have been loaded and are available for querying.

DOCUMENT_EDITABLE_CHANGED

Event when the editable status of the document has changed.

ONLINE_STATUS_CHANGED

Event when the user's client's online status has changed.

THREAD_MEMBERSHIP_CHANGED

Event when the users' thread membership has changed.

quip.apps.addEventListener

Subscribes a listener function to the given event type.

type

required

quip.apps.EventType

The event type to subscribe to.

callback

required

Function() => void

Whenever the event of the specified type happens, this function will be invoked.

quip.apps.removeEventListener

Removes a previously registered listener (if it exists).

type

required

quip.apps.EventType

The event type that the listener is listening for.

callback

required

Function() => void

The function instance to unsubscribe.

Example


class FocusComponent extends React.Component<{}, {focused: false}> {
state = {
focused: false,
}

componentDidMount() {
quip.apps.addEventListener(quip.apps.EventType.FOCUS, this.onFocus);
quip.apps.addEventListener(quip.apps.EventType.BLUR, this.onBlur);
}

componentWillUnmount() {
quip.apps.removeEventListener(quip.apps.EventType.FOCUS, this.onFocus);
quip.apps.removeEventListener(quip.apps.EventType.BLUR, this.onBlur);
}

onFocus = () => this.setState({ focused: true })

onBlur = () => this.setState({ focused: false })

render() {
return <div>focused {this.state.focused}</div>;
}
}