MultiInputField Component

The MultiInputField component is a versatile and customizable React input field that enables users to add, clear, or remove multiple values. It’s ideal for tags, categories, keywords, or any multi-value input requirements, with extensive support for custom styling and UI elements.

Features

• Multi-value Input: Users can add and manage multiple values.
• Clear All Values: Provides a clear-all option to reset the input.
• Remove Individual Values: Allows users to delete specific values.
• Customizable UI: Easily style the component, including label, input field, list items, and icons.
• Accessible and User-friendly: Supports required fields and placeholders for enhanced UX.

Installation

First, install the package via npm:

1npm install react-multivalue-text-input-field

Importing and Basic Setup

Step 1: Import the Component

1import MultiInputField from 'react-multivalue-text-input-field';
2import React, { useState } from 'react';

Step 2: Define State for the Values

Create a state to hold the input values using the useState hook.

1const App = () => {
2  const [values, setValues] = useState<string[]>([]);
3
4  return (
5    <MultiInputField
6      values={values}
7      setValues={setValues}
8      label="Enter Tags"
9      placeholder="Type and press enter"
10      required={true}
11    />
12  );
13};
14
15export default App;

In this example, the values array will hold the current tags, and setValues updates this array when new tags are added or removed.

---

Detailed Props Guide

The MultiInputField component accepts the following props, allowing for comprehensive customization:

Required Props

Prop	Type	Description
values	string[]	Array of initial values for the input field.
setValues	(values: string[]) => void	Function that updates the values array on adding or removing tags.

Optional Props for Enhanced Customization

Prop	Type	Description
label	string	Label text for the input field.
labelStyle	string	Additional CSS class or style string for the label styling.
placeholder	string	Placeholder text that appears when no values are entered.
optionStyle	OptionStyleType	Custom styling for individual list items (background color, padding, etc.).
optionTextStyle	OptionTextType	Style properties for the text inside each list item.
optionCloseIcon	React.ReactNode	Custom icon component for removing a value.
optionCloseIconStyle	string	CSS class or style string for the remove icon styling.
containerFocusedStyle	string	CSS styling applied to the container when it is focused.
required	boolean	Marks the input field as required if set to true.

---

Full Prop Example with Descriptions

Here’s an example that demonstrates how to utilize various props for a fully customized experience:

1<MultiInputField
2  values={values}
3  setValues={setValues}
4  label="Tags"
5  labelStyle="custom-label-class" // Custom label CSS class for unique styling
6  placeholder="Type and hit Enter" // Placeholder text when no values are entered
7  optionStyle={{
8    backgroundColor: '#e0f7fa',
9    paddingHorizontal: '8px',
10    paddingVertical: '4px',
11    borderRadius: '4px'
12  }} // List item styling
13  optionTextStyle={{
14    color: '#00796b',
15    fontSize: '14px',
16    fontFamily: 'Arial, sans-serif',
17    fontWeight: 'bold'
18  }} // Text styling inside list items
19  optionCloseIcon={<span>&#10006;</span>} // Custom close icon using a 'x' symbol
20  optionCloseIconStyle="custom-close-icon-class" // Custom close icon style
21  containerFocusedStyle="focused-container-class" // Container style on focus
22  required // Sets the field as mandatory
23/>

---

Prop Breakdown

Required Properties

• values: An array of strings representing the initial values.
• setValues: A callback function that updates the values array when values are added or removed.

Label Customization

• label: Sets a descriptive text label above the input.
• labelStyle: Adds custom styling to the label, making it easy to match the input label with your design theme.

Placeholder Text

• placeholder: Sets the placeholder text inside the input box. It can indicate how to interact with the input, such as "Type and hit Enter."

Styling List Items

• optionStyle: Style the appearance of each list item, with properties like backgroundColor, paddingHorizontal, paddingVertical, and borderRadius.
• optionTextStyle: Customize the text inside each list item with color, fontSize, fontFamily, and fontWeight.

Close Icon Customization

• optionCloseIcon: Replace the default close icon with a custom one. For example, you could use a FontAwesome icon here.
• optionCloseIconStyle: Apply additional styling to the close icon, such as changing color, size, or padding.

Container Styling on Focus

• containerFocusedStyle: Specify styles that are applied to the container when it gains focus, such as adding a colored border.

Required Field Indicator

• required: Marks the input field as required. If true, an asterisk (*) appears next to the label.

---

Example with Full Customization and Clear Functionality

1import React, { useState } from 'react';
2import MultiInputField from 'react-multivalue-text-input-field';
3
4const TagInput = () => {
5  const [tags, setTags] = useState<string[]>(['Example Tag 1', 'Example Tag 2']);
6
7  return (
8    <MultiInputField
9      values={tags}
10      setValues={setTags}
11      label="Your Tags"
12      labelStyle="custom-label-style"
13      placeholder="Add a tag and press enter"
14      optionStyle={{
15        backgroundColor: '#ffeeff',
16        paddingHorizontal: '10px',
17        paddingVertical: '5px',
18        borderRadius: '8px'
19      }}
20      optionTextStyle={{
21        color: '#aa00aa',
22        fontSize: '13px'
23      }}
24      optionCloseIcon={<span>&times;</span>}
25      optionCloseIconStyle="close-icon-style"
26      containerFocusedStyle="input-focused-style"
27      required
28    />
29  );
30};
31
32export default TagInput;

---

Custom CSS Styling Tips

For users who want to define their own custom styles, use the following guidelines:

1.custom-label-style {
2  font-size: 16px;
3  color: #333;
4}
5
6.custom-close-icon-class {
7  font-size: 12px;
8  color: #ff3333;
9  cursor: pointer;
10}
11
12.input-focused-style {
13  border: 2px solid #007bff;
14}

---

License

This project is licensed under the MIT License. Please see the LICENSE file for more information.