No-style-password-field NPM

No Style Password Field

This NPM package offers a versatile and unstyled TextField component for React applications, designed to provide all the functionality of a password field while leaving the styling completely up to you. With this component, you have the freedom to design the look and feel by exposing class names for various elements within the component.

Installation

You can easily install this package using npm or yarn:

npm install no-style-password-field
# OR
yarn add no-style-password-field

Usage

To utilize this package in your React application, follow these simple steps:

Import the component:

import TextField from 'no-style-password-field';

Use the TextField component in your JSX code:

<TextField
  // Props go here
/>

Props

The TextField component accepts the following props:

placeholder (optional): A string representing the placeholder text for the input field.
className (optional): A string representing additional CSS classes to be applied to the input field.
value (optional): A string representing the current value of the input field.
name (required): A string representing the name of the input field.
onChange (optional): A callback function that is invoked when the input field value changes.
style (optional): An object representing additional inline styles to be applied to the input field.
id (optional): A string representing the HTML id attribute of the input field.
errorMessageClassName (optional): A string representing the CSS class for styling the error message.
mainContainerClassName (optional): A string representing the CSS class for styling the main container of the component.
inputContainerClassName (optional): A string representing the CSS class for styling the input container.
onError (optional): A callback function that is invoked when validation fails, providing the error message.
length (optional): A number representing the minimum length for input validation. Default is 8 characters.
errors (optional): An object with custom error messages for specific validation rules. Each key in the object corresponds to a validation rule's key, and the associated value is a string representing the custom error message for that rule.
validations (optional): An array of TValidation objects, where each object defines a validation rule. These rules can include regular expressions or custom validation functions to ensure input validity.

Example

<TextField
  mainContainerClassName="custom-main-container"
  onChange={(event:any)=>console.log(event)}
  onError={(error:string)=>console.log(error)}
  // Other props go here
/>

<PasswordField 
  name="password"
  validations={[
    { key: "length", validation: (value: string) => value.length >= 8 }
  ]}
  errors={{
  length: `Password must be at least ${length ?? 8} characters long`
  }}
/>

Keep in mind when passing a new validation rule you need to pass a error message for it to be displayed.

Features

Password input functionality with a visibility toggle.
Fully customizable styling through class names.
Input validation based on length, lowercase, uppercase, numbers, and special characters.
Callback function for handling validation errors.