nmm-xas-app-input-react

AppInput React Component

AppInput is a highly customizable and reusable input component for React applications. It supports various input types, including text, password, search, date, email, and number. This component also offers integrated validation messages and an option to include icons, making it a versatile choice for any React project.

Features

• Customizable Input Types: Supports text, password, search, date, email, and number.
• Validation Messages: Easily display error messages.
• Icon Support: Option to include icons within the input field.
• Flexible Styling: Utilizes styled-components for easy customization.

Installation

To use AppInput in your project, you will need to install the component and its peer dependencies if you haven't already.

npm install app-input-react
npm install react styled-components --save

Usage

Here's a quick guide to get you started with using AppInput in your React application.

First, import the AppInput component:

import AppInput from 'app-input-react';

Then, you can use it in your React component:

import React, { useState } from 'react';
import AppInput from 'app-input-react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <AppInput
        text="Enter your name"
        value={inputValue}
        setValue={setInputValue}
        errorMessage="This field is required"
        icon={<YourIconComponent />} // Optional: Include your icon component
      />
    </div>
  );
}

export default MyComponent;

Props

Prop	Type	Default	Description
text	string		Placeholder text for the input field.
inputType	string	"text"	Type of the input (e.g., text, password, email, etc.).
value	string		The current value of the input field.
setValue	function		Function to update the value of the input field.
className	string	""	CSS class for additional styling.
icon	element	null	Icon to display inside the input component.
width	string	"200"	Width of the input component, in pixels.
errorMessage	string	""	Error message to display below the input field.