# Function: usePresent()

```typescript
export function usePresent()
```

Defined in: [hooks/usePresent.ts:5](https://github.com/plandalf/numi/blob/fc6f42b5ade3d63b71623934838a6509f17203e2/packages/react/src/hooks/usePresent.ts#L5)

## Returns

`object`

### present

> **present**: (`slug`, `options?`) => `FlowHandle`\<`FlowResult`\>

#### Parameters

##### slug

`string`

##### options?

`any`

#### Returns

`FlowHandle`\<`FlowResult`\>

### presenting

> **presenting**: `boolean`

## Example

`usePresent()` returns an awaitable `present` function and a `presenting` flag. Use it inside [`PlandalfProvider`](https://plandalf.com/docs/packages/react/functions/PlandalfProvider).

```tsx UpgradeButton.tsx lineNumbers lineNumberStart=1 highlight="5-9"
import { usePresent } from '@plandalf/react'

export function UpgradeButton() {
  const { present, presenting } = usePresent()
  async function upgrade() {
    const result = await present('upgrade')
    if (result.status === 'complete') {
      // Ask your server for the customer's current entitlement.
    }
  }
  return <button disabled={presenting} onClick={upgrade}>Upgrade</button>
}
```

[See the full React example](https://plandalf.com/docs/guides/react-checkout).

Source: https://plandalf.com/docs/packages/react/functions/usePresent