@namphuongtechnologi/ui

Introduction

This project is designed to facilitate the reusability of React libraries. It includes a collection of reusable components, ui. The main goal of this project is to streamline the development process by providing a set of pre-built elements that can be incorporated into various React applications. This not only saves time but also ensures consistency across different projects.

Usage

Components

Usage

Example

Usage

Example

import { NPLogin } from '@namphuongtechnologi/ui'

function App() {
  const onSubmit = (values: OnLoginValues) => {
    console.log(values);
  };

  const onSendCode = (values: OnLoginValues) => {
    console.log(values);
  };

  return (
    <NPLogin
      logo={{ src: Logo }}
      title="Login"
      description="Enter your email below to login to your account"
      providers={[{ providerType: "google" }]}
      onSubmit={onSubmit}
      onSendCode={onSendCode}
      authStrategy="passwordless"
    />
  );
}

• logo
  • Type: HTMLImageElement
  • CSS Properties for logo
• title
  • Type: String
  • The title of login template
• description
  • Type: String
  • The description of login template
• providers
  • Type: Array<Provider>
  • List of provider use in login template
• onSubmit
  • Type: Function
  • Click login button
• onSendCode
  • Type: Function
  • Click send code button when using passwordless authStrategy
• authStrategy
  • Type: String: passwordless or passwords
  • Options:
    • passwordless: login with email or phone number without password
    • passwords: login with username and password
  • Default: passwordless
• identifiers
  • Type: Array<String>
  • Default: ['email']
  • Options:
    • email: use login passwordless with email
    • phone: use login passwordless with phone
• passwordsConfig
  • Type: PasswordsConfig
  • Options config passwords authStrategy
  • Default: undefined
  • Work with authStrategy is passwords
• passwordlessConfig
  • Type: PasswordlessConfig
  • Options config passwordless authStrategy
  • Default: undefined
  • Work with authStrategy is passwordless
• loginBtnText
  • Type: String
  • Default: Đăng nhập
  • The label of login button
• loginBtnProps
  • Type: HTMLButtonElement
  • Login button props

Types

Provider

| Name | Type | Description | | :------------- | :-------------- | :----------------------------- | | providerType | string | Required. Type of provider | | ... | CSSProperties | CSS Button Properties |

PasswordsConfig

| Name | Type | Description | | :--------------------- | :------------------ | :----------------------------------------------------- | | phoneZodSchema | ZodSchema | Phone ZodSchema | | emailZodSchema | ZodSchema | Email ZodSchema | | codeZodSchema | ZodSchema | Code ZodSchema | | emailText | String | Email label | | phoneText | String | Phone label | | verifyCodeText | String | Verify code label | | emailInputProps | HTMLInputElement | Email input props | | phoneInputProps | HTMLInputElement | Phone input props | | verifyCodeInputProps | HTMLInputElement | Verify code input props | | sendCodeText | String | Send code button title | | sendCodeBtnProps | HTMLButtonElement | Send code button props | | countdownTime | Number | Countdown time disabled after clicked send code button |

PasswordlessConfig

| Name | Type | Description | | :------------------- | :----------------- | :------------------- | | usernameZodSchema | ZodSchema | Username ZodSchema | | passwordZodSchema | ZodSchema | Password ZodSchema | | usernameText | string | Username label | | passwordText | string | Password label | | usernameInputProps | HTMLInputElement | Username input props | | passwordInputProps | HTMLInputElement | Password input props |