# @haven1/react-sdk

### Key Features

#### 1. Ready-to-Use React Components

* **UI Elements**: A library of generic components such as buttons, modals, and input fields designed for quick implementation.
* **Fully Functional Components**: Advanced components like notifications, 2FA dialogs, and more, pre-configured for Haven1 integration.
* **Design System**: All components follow the Haven1 design system, ensuring consistent aesthetics and user experience across projects.
* **Customization**: Built with Tailwind CSS, allowing you to easily customize styles to match your project’s needs.

#### 2. Icon Assets

* A comprehensive set of icons representing Haven1 products and features.
* Designed to seamlessly integrate into your UI.

#### 3. React Hooks with React Query

* **API Integration Hooks**: Simplify connecting your React project to Haven1 APIs using `@tanstack/react-query`.
* **Efficiency**: Automatically manage caching, loading states, and error handling for API requests.
* **Type-Safe**: Fully typed responses ensure reliability in your code.

### Storybook Documentation

Explore all components and their usage in our **Storybook**: [Storybook for @haven1/react-sdk](https://haven1network.github.io/haven1-sdk)

### **Installation**

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

```sh
npm install @haven1/react-sdk
```

{% endtab %}

{% tab title="yarn" %}

```sh
yarn add @haven1/react-sdk
```

{% endtab %}

{% tab title="pnpm" %}

```sh
pnpm add @haven1/react-sdk
```

{% endtab %}
{% endtabs %}

### Dependencies

This package requires the following peer dependencies:

* **React**
* **@tanstack/react-query**: For managing API data and caching.
* **@haven1/sdk-api-client**: To connect your React project to Haven1 APIs.

Install these dependencies if not already included in your project:

Before using the UI components from this package, ensure you have installed the necessary dependencies. Then, apply the styles to your project's global CSS file.

```css
@import '@haven1/react-sdk/css';
```

### Interfaces

* ButtonColorStyles
* ButtonSizeProps
* CircularLoadingProps
* EmptyNotificationProps
* GoldIconProps
* H1IconProps
* LoadingDotsProps
* NotificationBellProps
* NotificationComponentProps
* NotificationDialogProps
* NotificationItemListProps
* NotificationItemProps
* NotificationPopoverProps
* NotificationProps
* NotificationSignInProps
* OtpModalProps
* PlatinumIconProps
* SilverIconProps
* WH1IconProps

### Type Aliases

* ButtonColor
* ButtonProps
* NotificationItemType
* SubmitOtpParams
* ValidateAuthParams
* VerifyAuthParams

### Functions

* Button
* CircularLoading
* EmptyNotification
* ESH1Icon
* GoldIcon
* H1Icon
* Haven1SDKProvider
* LoadingDots
* Notification
* NotificationBell
* NotificationComponent
* NotificationDialog
* NotificationItem
* NotificationItemList
* NotificationPopover
* NotificationSignIn
* OtpModal
* PlatinumIcon
* SilverIcon
* useAuth
* useHaven1SDK
* useIdentity
* useNotifications
* useOTP
* useSignIn
* WH1Icon
* withHaven1Tag