React-input-chips

A package with minimum dependencies and maximum customization.

If you want an input field whose value converts to a customizable chip on a click of keys of your choice then this is the best package for you.

You have full control over

• validation of the field
• styling of the chips
• styling of the wrapper
• chip conversion trigger

Demo

Sandbox example

Installation

Install react-input-chips with npm

1  npm install react-input-chips

Usage/Examples

You just need to import the <InputChips/> component in the file you want the react-input-chip in and pass the required props that's it. All set!

One important thing for the default styling of the <InputChips/> is that you need to explicitly add CSS file import in the parent or higher or the same component. The following is the path to it

1import "../node_modules/react-input-chips/dist/index.css";

Hers is the simple plain example

1import { useState } from "react";
2import { InputChips } from "react-input-chips";
3
4const MyComponent = () => {
5	const [chips, setChips] = useState<string[]>([]);
6	const [inputValue, setInputValue] = useState("");
7
8	return (
9		<InputChips
10			chips={chips}
11			inputValue={inputValue}
12			setChips={setChips}
13			setInputValue={setInputValue}
14		/>
15	);
16};
17
18export default MyComponent;
19
20

Validation

If you want to add a validation function and the error message then you might try something like the following in the parent component

1const MyComponent = () => {
2    const [chips, setChips] = useState<string[]>([]);
3    const [inputValue, setInputValue] = useState('');
4    const [error, setError] = useState<{inputValueError?: string}>({});
5
6    const validation = () => {
7        const tempErr: {inputValueError?: string} = {};
8        if (!inputValue.trim().length) {
9            tempErr.inputValueError = 'atleast add one message';
10        }
11
12        setError(tempErr);
13        return Object.keys(tempErr).length <= 0;
14    };
15
16    return (
17        <InputChips
18            chips={chips}
19            inputValue={inputValue}
20            setChips={setChips}
21            setInputValue={setInputValue}
22            errorMsg={error?.inputValueError}
23            validate={validation}
24        />
25    );
26};
27

Props and information

I have for you here all the props supported as of now. (* these are required props)

Prop	Default Value	Description
chips*	-	This is a react state for storing the chips, it has to be an array
setChips*	-	This is the setState for chips state
inputValue*	-	This will be a react state for handling the user input before it turns into a chip
setInputValue*	-	This is the setState for input value
keysToTriggerChipConversion	[Enter', ',']	The keys entered in this array will trigger the chip conversion from the input value. (The values allowed in the array are mentioned below in the typescript interface, so you will be able to add the keys from that set only)
backspaceToRemoveChip	false	This will remove the chip when the user hits backspace after the inputvalue is cleared
validate	return value true	This is the validation function which must return a boolean value either true or false based on the conditions you want the field value to be valid or convertible into a chip. If the value is valid then n then only a chip will be created out of it
disabled	false	Enable that to disable the input field
placeholder	-	A placeholder for input field
nextPlaceholder	-	Placeholder after the first chip is created
removeBtnSvg	is an SVG which looks like close/X	You can add any HTML element as of now, but it is better to add an SVG element
chipStyles	-	You add any styles supported by CSS will be added as inline styles for the chip hence, the highest priority is given to your styles
containerStyles	-	You can add the CSS styles for the whole input container itself
errorMsg	-	It's the error message you want to display and expects a string as its value

keysToTriggerChipConversion - Allowed key codes

'ShiftRight' | 'ShiftLeft' | 'ControlLeft' | 'ControlRight' | 'AltRight'
| 'AltLeft' | 'MetaLeft' | 'MetaRight' | 'Tab' | 'Enter' | 'Backspace'
| 'Space' | 'Comma' | 'Period' | 'Slash' | 'Semicolon' | 'ArrowLeft'
| 'ArrowRight';

Additional Info

Hey guys,

It is the first npm package I ever released and it's gonna be so much fun. No worries, The supported props in the current version do not have any issues, in case you face any please open an issue or discussion, a PR for a fix would be much appreciated.

I am excited to get some initial issues and feature requests and will work on them on priority until version 1.0.0 😅 also after that.

What are the future visions as of now?

• Remove the explicit addition of the CSS file path
• Add 100% test cases for the component
• removeBtnSvg expects any HTML element, I want to enforce only SVG element
• Add a few more features to it

Any suggestions are welcome.

Support

For support, email at meetbhalodiya1030@gmail.com or open a discussion/issue

Authors

• @b-meet