js-utils-react

Welcome to javascript Utility for React.(js-utils-react)🖐

(js-utils-react). This is npm package made for who are react developer and don't have much time to create small and effective utility functions or components from scratch. Like, complete reusable button with all kinds of feature, or an input field with validations, or hooks like click outside to close a toggle section download features, etc. The main defference amongs other packages and this package is: the others don't provide you complete utility components or functions, you have to modify after download or installation. But our case it's not same. you can just use it as it is. just declare and provide apropreate props, your work will be done. You will get step by step guidence bellow, and remember mose of the case props are almost same. If you stuck then you can see source code for better understanding. Please check it out. Or you can contribute to make it so powerful and popular, contributers are always welcome.👍

Authors

• Kunal Chandra Das
• Github
• Linkedin

Input Fields documentation.

1. LTCustomTypeInput Component

The LTCustomTypeInput (Label top custom type input) component is a reusable and customizable input field built using React and TypeScript. It provides a simple interface for developers to include labeled input fields in their forms with ease. This component supports features like placeholder text, default values, required fields, and dynamic value updates via state.

---

Features

• Customizable input container and field IDs for flexible integration.
• Support for default values and placeholder text.
• Labels that dynamically hide or appear based on the presence of a value.
• Real-time value update via a state setter function.
• Configurable input types (e.g., text, number, email, etc.).
• Support for required fields.

---

Installation

npm install js-utils-react

Invocation

import React, { useState } from "react";
import LTCustomTypeInput from "./components/LTCustomTypeInput";

const App: React.FC = () => {
  const [inputValue, setInputValue] = useState<string>("");

  return (
    <div>
      <h1>Example Input</h1>
      <LTCustomTypeInput
        inputContainerId="username-container"
        inputFieldsId="username"
        fieldName="username"
        labelText="Username"
        placeholderText="Enter your username"
        isRequired={true}
        defaultVal=""
        targetCatcher={setInputValue}
        inputType="text"
      />
      <p>Current Value: {inputValue}</p>
    </div>
  );
};

export default App;

Props

The LTCustomTypeInput component accepts the following props:

Prop Name	Type	Description	Required
inputContainerId	string	ID for the input container element.	Yes
inputFieldsId	string	ID for the input field element.	Yes
fieldName	string	Name attribute for the input field (used in forms).	Yes
labelText	string	The text displayed as the input's label.	Yes
placeholderText	`string	undefined`	Placeholder text displayed in the input field (optional).
defaultVal	`string	number	undefined`
isRequired	boolean	Whether the input field is required.	Yes
targetCatcher	Dispatch<SetStateAction<string>>	Function to catch and update the input field's value in the parent state.	Yes
inputType	string	The type of input (e.g., text, number, email, etc.).	Yes

2. LTEmailInput Component

The LTEmailInput(Label top email input) component is a React-based reusable email input field with real-time validation. It allows users to input an email address, validates the domain against a predefined list, and provides feedback on validity. This component is built using TypeScript for type safety.

---

Features

• Real-Time Validation: Validates the entered email's domain from a predefined list.
• Dynamic Feedback: Displays feedback messages based on the validity of the email.
• Customizable: Fully customizable props for labels, placeholders, and validation messages.
• Styling Options: Conditional styling for valid, invalid, and neutral states.
• Default Email Support: Supports default email values.

---

Installation

npm install js-utils-react

Invocation

import React, { useState } from "react";
import LTEmailInput from "./components/LTEmailInput";

const App: React.FC = () => {
  const [email, setEmail] = useState<string>("");

  return (
    <div>
      <h1>Email Input Example</h1>
      <LTEmailInput
        inputContainerId="email-container"
        inputFieldsId="email"
        fieldName="email"
        labelText="Email Address"
        placeholderText="Enter your email"
        isRequired={true}
        defaultEmail=""
        targetCatcher={setEmail}
        targetValue={email}
      />
      <p>Current Email Value: {email}</p>
    </div>
  );
};

export default App;

Prop Name	Type	Description	Required
inputContainerId	string	ID for the input container element.	Yes
inputFieldsId	string	ID for the input field element.	Yes
fieldName	string	Name attribute for the input field (used in forms).	Yes
labelText	string	The text displayed as the input's label.	Yes
placeholderText	`string	undefined`	Placeholder text displayed in the input field (optional).
defaultEmail	`string	undefined`	Default email value for the input field (optional).
isRequired	boolean	Whether the input field is required.	Yes
targetCatcher	Dispatch<SetStateAction<string>>	Function to catch and update the input field's value in the parent state.	Yes
targetValue	string	The value of the input field to validate against the predefined domain list.	Yes

3. LTMobileNoInput Component

The LTMobileNoInput(Label top mobile number input) component is a React component designed to handle mobile number inputs with country code selection. It validates the mobile number length and updates the parent component with the complete mobile number, including the country code.

Installation

To use the LTMobileNoInput component, first install the necessary dependencies:

npm install js-utils-react

Invocation

import LTMobileNoInput from './path-to-component/LTMobileNoInput';

function App() {
  const [mobileNumber, setMobileNumber] = useState('');

  return (
    <div className="App">
      <LTMobileNoInput
        inputContainerId="mobileInputContainer"
        inputFieldsId="mobileInputField"
        fieldName="mobileNumber"
        labelText="Mobile Number"
        placeholderText="Enter your mobile number"
        defaultMobileNo=""
        isRequired={true}
        targetCatcher={setMobileNumber}
      />
      <p>Mobile Number: {mobileNumber}</p>
    </div>
  );
}

export default App;

Props

The LTMobileNoInput component accepts the following props:

Prop Name	Type	Description	Required
inputContainerId	string	The ID for the input container element.	Yes
inputFieldsId	string	The ID for the input field element.	Yes
fieldName	string	The name attribute for the input field.	Yes
labelText	string	The label text for the input field.	Yes
placeholderText	string	The placeholder text for the input field.	No
defaultMobileNo	string	The default value for the mobile number input.	No
isRequired	boolean	Indicates whether the input field is required.	Yes
targetCatcher	Dispatch<SetStateAction<string>>	A callback function to catch the final mobile number value.	Yes

4. LTPasswordInput Component

The LTPasswordInput (Label top password inputs) component is a React component designed to handle password inputs with validation and a feature to show/hide the password. It provides feedback on the password strength and updates the parent component with the password value.

Installation

To use the LTPasswordInput component, first install the necessary dependencies:

npm install js-utils-react

Invocation

import LTPasswordInput from './path-to-component/LTPasswordInput';

function App() {
  const [password, setPassword] = useState('');

  return (
    <div className="App">
      <LTPasswordInput
        inputContainerId="passwordInputContainer"
        inputFieldsId="passwordInputField"
        fieldName="password"
        labelText="Password"
        placeholderText="Enter your password"
        isRequired={true}
        targetCatcher={setPassword}
        targetValue={password}
      />
      <p>Password: {password}</p>
    </div>
  );
}

export default App;

Props

The LTMobileNoInput component accepts the following props:

Prop Name	Type	Description	Required
inputContainerId	string	The ID for the input container element.	Yes
inputFieldsId	string	The ID for the input field element.	Yes
fieldName	string	The name attribute for the input field.	Yes
labelText	string	The label text for the input field.	Yes
placeholderText	string	The placeholder text for the input field.	No
isRequired	boolean	Indicates whether the input field is required.	Yes
targetCatcher	Dispatch<SetStateAction<string>>	A callback function to catch the mobile number value.	Yes
defaultMobileNo	string	The default value for the mobile number input.	No

Styling

The Inputs component uses InputStyles.css for styling. You can customize these styles to match your design requirements.

Default Classes

Class Name	Purpose
input_group	Styles the input container group.
input	Styles the email input field.
validBorder	Applied when the email is valid.
invalidBorder	Applied when the email is invalid.
hiddenLabel	Hides the label when a default value is present.
user_label	Styles the label for visible input fields.
valid_message	Styles the success message.
not_valid_message	Styles the error message.
initialStateStyle	Styles applied when no validation occurs.

---

You can modify the classes as design requirements.

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

License

Developed by Kunal Chandra Das under MIT license © 2024