# 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);
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hello-lisa.com/developers/widgets/api-reference/quick-view-api-reference.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.