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

Installation

Install react-input-chips with npm

  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

import "../node_modules/react-input-chip-beta/dist/index.css";

Hers is the simple plain example

import { useState } from "react";
import { InputChips } from "react-input-chip-beta";

const MyComponent = () => {
	const [chips, setChips] = useState<string[]>([]);
	const [inputValue, setInputValue] = useState("");

	return (
		<InputChips
			chips={chips}
			inputValue={inputValue}
			setChips={setChips}
			setInputValue={setInputValue}
		/>
	);
};

export default MyComponent;

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

const MyComponent = () => {
    const [chips, setChips] = useState<string[]>([]);
    const [inputValue, setInputValue] = useState('');
    const [error, setError] = useState<{inputValueError?: string}>({});

    const validation = () => {
        const tempErr: {inputValueError?: string} = {};
        if (!inputValue.trim().length) {
            tempErr.inputValueError = 'atleast add one message';
        }

        setError(tempErr);
        return Object.keys(tempErr).length <= 0;
    };

    return (
        <InputChips
            chips={chips}
            inputValue={inputValue}
            setChips={setChips}
            setInputValue={setInputValue}
            errorMsg={error?.inputValueError}
            validate={validation}
        />
    );
};

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 [e-mail] or open a discussion/issue

Authors

• @b-meet