react-verified-input v1.0.5
react-verified-input
š A React component that provides validated input fields with customizable validation rules and error messages.
react-verified-input is a specialized React input component designed to enhance user experience by providing input validation, customizable validation rules, and error messages. It supports text, number, and password input types, ensuring seamless integration into your React applications.
Installation
npm install react-verified-inputor
yarn add react-verified-inputUsage
Step 1: Use the Component
Simply import and use the VerifiedInput component in your React application:
import VerifiedInput from 'react-verified-input';
function App() {
const [value, setValue] = useState('');
return (
<VerifiedInput
value={value}
onChange={(e) => setValue(e.target.value)}
type="text"
enableValidation={true}
validationFunction={(v) => v.length > 0}
errorMessage="Input is invalid!"
/>
);
}Props of DebounceButton Component
The VerifiedInput component inherits all the properties of an input element, allowing for easy customization and styling. Additionally, it has specific props for validation:
| Prop | Type | Default | Description |
|---|---|---|---|
value * | string \| number | - | The value of the input box. |
onChange * | (e: ChangeEvent<HTMLInputElement>) => void | - | The callback function when the value of the input box changes. |
type * | 'text' \| 'number' \| 'password' | - | The type of the input box, either text, number, or password. |
maxVal | number | - | The maximum value of the input box. |
isMinValueEnabled | boolean | false | Whether to enable the minimum value check. |
minVal | number | 0 | The minimum value of the input box. |
isInteger | boolean | true | Whether the input must be an integer. |
isShowArrow | boolean | true | Whether to show the up and down arrows on the number input. |
isZeroStart | boolean | false | Whether it is allowed to input numbers starting with 0 (e.g., 001). |
enableValidation | boolean | false | Whether to enable input validity verification. |
validationFunction | (v: string) => boolean | () => true | The function to verify the validity of the input. If not passed, the default is successful verification. |
buttonTouchedFlag | boolean | false | Whether the parent component has clicked the submit button. |
errorMessage | string | - | The text of the error message. |
errorMessageClassName | string | - | The style class name of the error message. |
errorInputClassName | string | - | The style class name of the error input box. |
isShowPassword | boolean | false | In password mode, whether the password can be seen. |
endIcon | JSX.Element | - | The icon displayed at the end of the input field. |
Usage Example
You can use other input properties like id, className, and style for further customization:
import VerifiedInput from 'react-verified-input';
function ExampleComponent() {
const [value, setValue] = useState('');
return (
<VerifiedInput
value={value}
onChange={(e) => setValue(e.target.value)}
maxVal={100}
minVal={0}
isMinValueEnabled={true}
isInteger={true}
isShowArrow={true}
isZeroStart={false}
type="password"
isShowPassword={true}
enableValidation={true}
validationFunction={(v) => v.length > 0}
buttonTouchedFlag={true}
errorMessage="Invalid input!"
errorMessageClassName="error-message"
errorInputClassName="error-input"
id="example"
className="custom-class"
style={{ backgroundColor: 'lightblue' }}
endIcon={<SomeIcon />}
/>
);
}About the Author
This component library is developed and maintained by zqsun. If you encounter any issues or have suggestions, please feel free to open an issue on the GitHub repository.