⚛️@haven1/react-sdk

The @haven1/react-sdk package provides a comprehensive library of ready-to-use React components, icons, and hooks to accelerate development with Haven1. Designed for flexibility and customization, it

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

Installation

npm

npm install @haven1/react-sdk

yarn

yarn add @haven1/react-sdk

pnpm

pnpm add @haven1/react-sdk

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.

@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