

# useListener

<div class="api-docs__separator" data-reactroot="">

---

</div><div class="api-docs__import" data-reactroot="">

```ts
import { useListener } from "@hyper-fetch/react"
```

</div><div class="api-docs__section">

## Description

</div><div class="api-docs__description"><span class="api-docs__do-not-parse">



</span></div><p class="api-docs__definition">

Defined in [hooks/use-listener/use-listener.hooks.ts:8](https://github.com/BetterTyped/hyper-fetch/blob/993719ed/packages/react/src/hooks/use-listener/use-listener.hooks.ts#L8)

</p><div class="api-docs__section">

## Preview

</div><div class="api-docs__preview fn">

```ts
useListener<ListenerType>(listener, __namedParameters)
```

</div><div class="api-docs__section">

## Parameters

</div><div class="api-docs__parameters"><table><thead><tr><th>Name</th><th>Details</th></tr></thead><tbody><tr param-data="listener"><td class="api-docs__param-name required">

### listener 

`Required`

</td><td class="api-docs__param-type">

`ListenerType`

</td></tr><tr param-data="__namedParameters"><td class="api-docs__param-name required">

### \_\_namedParameters 

`Required`

</td><td class="api-docs__param-type">

`UseListenerOptionsType`

</td></tr></tbody></table></div><div class="api-docs__section">

## Returns

</div><div class="api-docs__returns">

```ts
{
  connected: boolean;
  connecting: boolean;
  data: unknown;
  listen: () => void;
  onClose: (callback: VoidFunction) => void;
  onConnecting: (callback: VoidFunction) => void;
  onError: (callback: (event: ErrorType) => void) => void;
  onEvent: (callback: (data: ExtractListenerDataType<ListenerType>, event: MessageEvent<ExtractListenerDataType<ListenerType>>) => void) => void;
  onOpen: (callback: VoidFunction) => void;
  onReconnecting: (callback: (attempts: number) => void) => void;
  onReconnectingStop: (callback: (attempts: number) => void) => void;
  setConnected: (connected: boolean) => void;
  setConnecting: (connecting: boolean) => void;
  setData: (data: unknown) => void;
  setTimestamp: (timestamp: number) => void;
  timestamp: number;
}
```

</div>