> For the complete documentation index, see [llms.txt](https://docs.hello-lisa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hello-lisa.com/developers/widgets/api-reference/quick-view-api-reference.md).

# Quick View API reference

### Events

Listed below are all the events emitted by the quick view component. Use .on() to register event listeners to each of these events.

library.quickView\.Event.CLOSE

The quick view component is about to close.

library.quickView\.Event.CLOSED

The quick view component has closed. All transitions and closing animations are completed.

library.quickView\.Event.OPEN

The quick view component is about to open.

library.quickView\.Event.OPENED

The quick view component has opened. All transitions and opening animations are completed.

### Methods

This section lists the public methods the quick view component exposes.

hide()

Hide the quick view currently visible.

**Usage example:**

```javascript
library.quickView.hide();
```

off(event: string, handler: () => void)

Removes a previously registered event listener from receiving any more events.

**Parameters**

event — A string which specifies the type of event for which to remove an event listener. 

handler — The event listener function of the event handler to remove from the LiSA player.

{% hint style="warning" %}
The event listener function of the event handler must be the same as at the time of registration. Using .bind() changes the function reference.

Calling off() with arguments that do not identify any currently registered event listener on the quick view component has no effect.
{% endhint %}

**Usage example:**

```javascript
const handler = (err) => {
  console.error('Quick view opens', err);
};

// Register the event handler
library.quickView.on(library.quickView.Event.OPEN, handler);

// Remove the event handler again
library.quickView.off(library.quickView.Event.OPEN, handler);

```

on(event: string, handler)

Registeres an event handler for any of the events listed above.

**Usage example:**

```javascript
library.quickView.on(library.quickView.Event.CLOSED, () => {
  consoel.log('Quick view closed');
});
```

removeAllListeners(event: string)

Remove all event listeners previously registered to the LiSA player.

**Usage example:**

```javascript
library.quickView.on(library.quickView.Event.OPEN, () => console.log('Quick view opens'));

library.quickView.on(library.quickView.Event.CLOSE, () => console.log('Quick view closes'));

// Prevent all listeners from being invoked
library.quickView.removeAllListeners();
```

show(url: string)

Open the given url in the quick view component.

**Usage example:**

```javascript
library.player.on(library.player.Event.PRODUCT_VIEW, (payload, first, product) => {
  // payload action contains the product URL in this example
  library.quickView.show(payload.action);
});
```