bnp-react-register

React Register Component

A plug-and-use React component for creating a user registration page with customizable fields.

Installation

npm install bnp-react-register

Usage

import React from 'react';
import { Register, FieldType, FieldConfig, Validator } from 'bnp-react-register';

// Custom validator function
const isValidCustomField = (value: string) => {
  // Your custom validation logic here
  return value.length >= 8;
};

const YourRegisterPage = () => {
  return (
    <Register
      headerLabel="Create an Account"
      fieldsToShow={[
        {
          id: "email",
          field: FieldType.EMAIL,
          label: "Email",
          validation: {
            validator: (email) => isEmailValid(email),
            errorText: "Invalid email",
          },
        },
        {
          id: "password",
          field: FieldType.PASSWORD,
          label: "Password",
        },
        {
          id: "phno",
          field: FieldType.PHONE_NUMBER,
          label: "Phone Number",
        },
        {
          id: "addr",
          field: FieldType.ADDRESS,
          label: "Address",
          type: "textarea",
        }
      ]}
      registerButtonLabel="Sign Up"
      registerButtonSize="large"
      onRegister={(data) => handleRegistration(data)}
    />
  );
};

Props

• headerLabel: (Optional) Custom label or JSX element for the header of the registration page.
• fieldsToShow: An array of objects specifying the fields to display. Each object should have an id (unique identifier), field (field type), and optional properties like label, helperText, validation, onChange, and type.
• registerButtonLabel: (Optional) Custom label for the registration button.
• registerButtonSize: (Optional) Size of the registration button ("small", "normal", "large").
• customRegisterButton: (Optional) Custom JSX element to replace the default registration button.
• onRegister: (Optional) Callback function triggered when the registration button is clicked.

Mixing and Matching Fields

You can mix and match the fieldsToShow array to create your own set of fields and validations. Each object in the array corresponds to a registration field, allowing for easy customization.

Custom fields

You can also add your own custom fields along with the predefined fields. Just use the FieldType.CUSTOM and provide you custom field component as the element property.

Note: When using custom fields the onRegister, onChange will not have the data for the custom field, hence the handling of custom field is needed to be done manually

Example

<Register
  headerLabel="Create an Account"
  fieldsToShow={[
    {
      id: "email",
      field: FieldType.EMAIL,
      label: "Email",
      validation: {
        validator: (email) => isEmailValid(email),
        errorText: "Invalid email",
      },
    },
    {
      id: "password",
      field: FieldType.PASSWORD,
      label: "Password",
    },
    {
      id: "phno",
      field: FieldType.PHONE_NUMBER,
      label: "Phone Number",
    },
    {
      id: "role",
      field: FieldType.CUSTOM,
      element: (
            <div>
              <input placeholder="Custom field" />
            </div>
        ),
      },
    {
      id: "addr",
      field: FieldType.ADDRESS,
      label: "Address",
      type: "textarea",
    },
  ]}
  onRegister={(data) => handleRegistration(data)}
/>

Creating a Custom Register Button

You can create your own register button by providing a custom JSX element using the customRegisterButton prop. This allows for complete control over the appearance and behavior of the registration button.

Example

<Register
  headerLabel="Create an Account"
  fieldsToShow={[
    {
      id: "email",
      field: FieldType.EMAIL,
      label: "Email",
      validation: {
        validator: (email) => isEmailValid(email),
        errorText: "Invalid email",
      },
    },
    {
      id: "password",
      field: FieldType.PASSWORD,
      label: "Password",
    },
    {
      id: "phno",
      field: FieldType.PHONE_NUMBER,
      label: "Phone Number",
    },
    {
      id: "addr",
      field: FieldType.ADDRESS,
      label: "Address",
      type: "textarea",
    },
  ]}
  customRegisterButton={<YourCustomButton />}
  onRegister={(data) => handleRegistration(data)}
/>

FieldConfig Interface

The FieldConfig interface defines the structure for configuring a field in the registration component:

export interface FieldConfig {
  id: string;
  field: FieldType;
  label?: string | React.JSX.Element;
  helperText?: string | React.JSX.Element;
  validation?: Validator;
  onChange?: (arg: { field: string; value: string }) => any;
  type?: "text" | "password" | "tel" | "textarea" | "number";
  element?: React.JSX.Element;
}

Validator Interface

The Validator interface defines the structure for a validation function:

export interface Validator {
  validator: (value: string) => boolean;
  errorText?: string;
}

FieldType Enum

The FieldType enum defines the types of fields available for configuration:

export enum FieldType {
  NAME = "Name",
  PASSWORD = "Password",
  PHONE_NUMBER = "Phone number",
  ADDRESS = "Address",
  EMAIL = "Email",
  CUSTOM = "CUSTOM",
}

License

This project is licensed under the MIT License - see the LICENSE.md file for details.