⚛️@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 install @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

PrevioususeContractWriteNextuseHaven1SDK

Last updated