# Getting Started

## Notifications

`useink/notifications` is an extension of `useink` that provides an opinionated state management system for tracking the changing status of a transaction. When you add a notification it will live until the configured time to live has expired then will automatically be removed from state. This is useful for temporarily displaying a notification then having it removed in the view. `useink/notifications` does not contain any UI elements. It only tracks state. You can use this in combination with UI libraries or components of your choice.

### Installation[​](https://use.ink/frontend/notifications#installation) <a href="#installation" id="installation"></a>

You must first [install useink](https://use.ink/frontend/getting-started#installation). `useink/notifications` has its own import path in the

### Configure tsconfig.json[​](https://use.ink/frontend/notifications#configure-tsconfigjson) <a href="#configure-tsconfigjson" id="configure-tsconfigjson"></a>

You must set `moduleResolution` to `nodenext` or `bundler`. This feature allows your application to discover the `useink/notifications` import paths defined in the **useink** `package.json`.

```javascript
{
  "compilerOptions": {
    "moduleResolution": "nodenext", // or `bundler`
  }
}
```

### Add NotificationsProvider[​](https://use.ink/frontend/notifications#add-notificationsprovider) <a href="#add-notificationsprovider" id="add-notificationsprovider"></a>

Notification state management is not in useink by default. You must wrap your application with `<NotificationsProvider>`.

```javascript
import { NotificationsProvider } from 'useink/notifications'

const FIVE_SECONDS = 5000
const HALF_A_SECOND = 500

function App({ children }) {
  return (
    <NotificationsProvider config={{
      expiration: FIVE_SECONDS, // default. This can be omitted
      checkInterval: : HALF_A_SECOND, // default. This can be omitted
    }}>
      <MyRoutes />
    </NotificationsProvider>
  )
}

export default App
```

### Configuring Notifications[​](https://use.ink/frontend/notifications#configuring-notifications) <a href="#configuring-notifications" id="configuring-notifications"></a>

If you want Notifications to live in state for ever, or until you remove them you can set the

```javascript
import { NotificationsProvider } from 'useink/notifications'

const FIVE_SECONDS = 5000
const HALF_A_SECOND = 500

function App({ children }) {
  return (
    <NotificationsProvider config={{
      expiration: FIVE_SECONDS, // default. This can be omitted
      checkInterval: : HALF_A_SECOND, // default. This can be omitted
    }}>
      <MyRoutes />
    </NotificationsProvider>
  )
}

export default App
```

See [configuration](https://use.ink/frontend/notifications/configuration) to learn about custom and default settings.