# @plandalf/react

Wrap your app in [`PlandalfProvider`](https://plandalf.com/docs/packages/react/functions/PlandalfProvider), then use [`usePresent()`](https://plandalf.com/docs/packages/react/functions/usePresent) to open an offer or [`useGate()`](https://plandalf.com/docs/packages/react/functions/useGate) to protect a feature. See the [checkout](https://plandalf.com/docs/guides/await-a-checkout) and [feature gate](https://plandalf.com/docs/guides/gate-a-feature) examples to switch between JavaScript and React code. React re-exports core SDK types such as [`FlowHandle`](https://plandalf.com/docs/packages/sdk/interfaces/FlowHandle), [`FlowOpenOptions`](https://plandalf.com/docs/packages/sdk/interfaces/FlowOpenOptions), and [`GateResult`](https://plandalf.com/docs/packages/sdk/interfaces/GateResult); follow those links for their full fields.

## Interfaces

- [BaseEmbedProps](https://plandalf.com/docs/packages/react/interfaces/BaseEmbedProps)
- [CheckoutConfig](https://plandalf.com/docs/packages/react/interfaces/CheckoutConfig)
- [CheckoutHookReturn](https://plandalf.com/docs/packages/react/interfaces/CheckoutHookReturn)
- [CheckoutItem](https://plandalf.com/docs/packages/react/interfaces/CheckoutItem)
- [CustomerInfo](https://plandalf.com/docs/packages/react/interfaces/CustomerInfo)
- [EmbedEventCallbacks](https://plandalf.com/docs/packages/react/interfaces/EmbedEventCallbacks)
- [FullScreenEmbedProps](https://plandalf.com/docs/packages/react/interfaces/FullScreenEmbedProps)
- [GateProps](https://plandalf.com/docs/packages/react/interfaces/GateProps)
- [JourneyProps](https://plandalf.com/docs/packages/react/interfaces/JourneyProps)
- [LegacyPopupEmbedProps](https://plandalf.com/docs/packages/react/interfaces/LegacyPopupEmbedProps)
- [PlandalfProviderProps](https://plandalf.com/docs/packages/react/interfaces/PlandalfProviderProps)
- [PopupEmbedProps](https://plandalf.com/docs/packages/react/interfaces/PopupEmbedProps)
- [StandardCheckoutArgs](https://plandalf.com/docs/packages/react/interfaces/StandardCheckoutArgs)
- [StandardEmbedProps](https://plandalf.com/docs/packages/react/interfaces/StandardEmbedProps)

## Type Aliases

- [JourneyContextValue](https://plandalf.com/docs/packages/react/type-aliases/JourneyContextValue)
- [JourneyOptions](https://plandalf.com/docs/packages/react/type-aliases/JourneyOptions)

## Variables

- [FlowResultStatus](https://plandalf.com/docs/packages/react/variables/FlowResultStatus)
- [NumiFullScreenEmbed](https://plandalf.com/docs/packages/react/variables/NumiFullScreenEmbed)
- [NumiStandardEmbed](https://plandalf.com/docs/packages/react/variables/NumiStandardEmbed)

## Functions

- [Gate](https://plandalf.com/docs/packages/react/functions/Gate)
- [Journey](https://plandalf.com/docs/packages/react/functions/Journey)
- [NumiPopupEmbed](https://plandalf.com/docs/packages/react/functions/NumiPopupEmbed)
- [NumiStandardCheckout](https://plandalf.com/docs/packages/react/functions/NumiStandardCheckout)
- [OfferFullScreenEmbed](https://plandalf.com/docs/packages/react/functions/OfferFullScreenEmbed)
- [OfferPopupEmbed](https://plandalf.com/docs/packages/react/functions/OfferPopupEmbed)
- [OfferStandardEmbed](https://plandalf.com/docs/packages/react/functions/OfferStandardEmbed)
- [PlandalfProvider](https://plandalf.com/docs/packages/react/functions/PlandalfProvider)
- [useCountdown](https://plandalf.com/docs/packages/react/functions/useCountdown)
- [useEmbedEvents](https://plandalf.com/docs/packages/react/functions/useEmbedEvents)
- [useGate](https://plandalf.com/docs/packages/react/functions/useGate)
- [useGateTrigger](https://plandalf.com/docs/packages/react/functions/useGateTrigger)
- [useJourney](https://plandalf.com/docs/packages/react/functions/useJourney)
- [useJourneyOptional](https://plandalf.com/docs/packages/react/functions/useJourneyOptional)
- [useMessageListener](https://plandalf.com/docs/packages/react/functions/useMessageListener)
- [useNumiEvents](https://plandalf.com/docs/packages/react/functions/useNumiEvents)
- [useNumiFrame](https://plandalf.com/docs/packages/react/functions/useNumiFrame)
- [usePlandalf](https://plandalf.com/docs/packages/react/functions/usePlandalf)
- [usePresent](https://plandalf.com/docs/packages/react/functions/usePresent)
- [usePromo](https://plandalf.com/docs/packages/react/functions/usePromo)
- [useUser](https://plandalf.com/docs/packages/react/functions/useUser)

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