# useModal

{% hint style="info" %}
Hooks that exposes Modalfy's API.
{% endhint %}

{% hint style="danger" %}
**Note:** Prefer [**withModal()**](https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/withmodal) HOC if you're using a Class component.
{% endhint %}

{% hint style="success" %}
The object returned by `useModal()`is covered in [**ModalProp**](https://colorfy-software.gitbook.io/react-native-modalfy/2.x/api/types/modalprop).
{% endhint %}

{% tabs %}
{% tab title="TypeScript" %}

```javascript
const useModal = <P extends ModalfyParams>(): UsableModalProp<P> => {
  const context: UsableModalProp<P> = React.useContext(ModalContext)
  return {
    closeAllModals: context.closeAllModals,

    closeModal: context.closeModal,

    closeModals: context.closeModals,

    currentModal: context.currentModal,

    openModal: context.openModal,
  }
}
```

{% endtab %}
{% endtabs %}

{% embed url="<https://github.com/colorfy-software/react-native-modalfy/blob/master/lib/useModal.ts>" %}

{% hint style="info" %}
If you're using TypeScript and have [your params types](https://colorfy-software.gitbook.io/react-native-modalfy/2.x/guides/typing#modalprop), you can get some nice autocomplete by utilising `useModal()`like this:

```javascript
import { ModalStackParamsList } from 'App'
// ...
const { openModal } = useModal<ModalStackParamsList>()
```

{% endhint %}