---
metaTitle: Refresh Wrapper component | AwesCode UI
meta:
  - name: description
    content: The <AwRefreshWrapper /> component is used to render Pull-to-refresh wrapper - UI Vue component for AwesCode UI.
title: Refresh Wrapper
---

# Refresh Wrapper

**Category:** Atom | **Import:** Global

The `AwRefreshWrapper` component provides pull-to-refresh functionality for mobile touch devices.

## Overview

`AwRefreshWrapper` enables pull-to-refresh gesture on mobile devices. When the user pulls down at the top of the scrollable content, it triggers a refresh event. The component shows a loading indicator and rotating icon during the pull gesture.

## Usage

### Basic Example

```markup
<AwRefreshWrapper @refresh="handleRefresh">
    <div>Scrollable content</div>
</AwRefreshWrapper>
```

### With Loading State

```markup
<AwRefreshWrapper :loading="isRefreshing" @refresh="handleRefresh">
    <div>Content</div>
</AwRefreshWrapper>
```

### Disable Refresh

```markup
<AwRefreshWrapper :ignore-refresh="true">
    <div>Content without refresh</div>
</AwRefreshWrapper>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| loading | Whether refresh is in progress | `Boolean` | `false` | `false` |
| ignoreRefresh | Disable pull-to-refresh functionality | `Boolean` | `false` | `false` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Scrollable content | - | - |
| before | Content before refresh loader | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| refresh | - | Emitted when user completes pull-to-refresh gesture |

## Related Components

- `AwDock` - Dock component with similar touch interactions
- `AwPage` - Page component that may use refresh wrapper

## Notes

- **Import Method:** Global - Available as atom component
- Only works on touch devices (mobile)
- Requires page to be at scroll position 0 (top) to trigger
- Minimum pull distance is 75px to trigger refresh
- Maximum pull distance is calculated based on viewport height
- Supports haptic feedback (vibration) on supported devices
- Icon rotates based on pull distance when not loading