# useSettingsPage

**Category:** Base Components/Pages/Settings Page/Hooks/useSettingsPage

## API

### Overview

A React hook that creates the state for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Configure settings fetching, save/cancel flow, form integration, and toasts. The returned [`SettingsPageState`](./?path=/story/base-components-pages-settings-page-state--settingspagestate) is passed to ``.

```tsx
import { useSettingsPage } from '@wix/patterns/page';
```

### Example

```tsx
import { useSettingsPage, SettingsPage } from '@wix/patterns/page';
import { useForm } from 'react-hook-form';

const form = useForm({ defaultValues: { notifications: true } });

const state = useSettingsPage({
  fetch: () => api.getSettings().then((settings) => ({ settings })),
  onSave: () => api.saveSettings(form.getValues()),
  onCancel: () => form.reset(),
  form,
  container,
});

return (
  
    
    
      ...
    
  
);
```

### Returns

[SettingsPageState](./?path=/story/base-components-pages-settings-page-state--settingspagestate)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `fetch` | `() => Promise<{ settings: T \| undefined; }>` | Yes | - | A function that fetches the settings data. @returns a promise that resolves to an object containing the settings. |
| `onSave` | `() => Promise<void>` | Yes | - | A function to handle the save action. |
| `saveSuccessToast` | `string \| { message?: string; }` | No | - | An optional object with an optional message, or it can directly get a string message. |
| `saveErrorToast` | `((err: unknown, params: { retry: () => void; }) => string \| { message?: string; tryAgain?: boolean; action?: { text: string; onClick: () => void; } \| undefined; }) \| undefined` | No | - | An optional function to display an error toast message when a save operation fails. @returns An object with a `message` and an `action` object. Alternatively, it can return an object with an optional `message` and a `tryAgain` flag, or a string message. The previous return types are still supported but are now deprecated. |
| `onCancel` | `() => Promise<void>` | Yes | - | A function to handle the cancel action. |