feat: ✨ onKeyUp event callback and custom classNames for tag and input (#24)

* add onkeyup event and className for style the tags and input field (#22)

* add onkeyup event and className for style the tags and input field

* Refactors

Co-authored-by: Moin Khan <moin26944@gmail.com>

* chore: 🧹 housekeeping

Co-authored-by: Moin Khan <moin26944@gmail.com>

Author: harshzalavadiya

README.md

@@ -61,6 +61,8 @@ export default Example;
 | `placeholder`       | placeholder for text input                                                      | `string`                                           |             |
 | `value`             | initial tags                                                                    | `string[]`                                         | `[]`        |
 | `onChange`          | onChange callback (added/removed)                                               | `string[]`                                         |             |
+| `classNames`        | className for styling input and tags (i.e {tag:'tag-cls', input: 'input-cls'})  | `object[tag, input]`                               |             |
+| `onKeyUp`           | input `onKeyUp` callback                                                        | `event`                                            |             |
 | `onBlur`            | input `onBlur` callback                                                         | `event`                                            |             |
 | `seprators`         | when to add tag (i.e. `Space`,`Enter`)                                          | `string[]`                                         | `["Enter"]` |
 | `onExisting`        | if tag is already added then callback                                           | `(tag: string) => void`                            |             |

src/classnames.tsx

@@ -2,9 +2,9 @@
  * A minimal utility to combine classes
  *
  * @export
- * @param {(string[] | string)} obj
+ * @param {(string[] | string | undefined)} obj
  * @returns {string}
  */
-export default function cc(...obj: (string | number)[]): string {
-  return obj.join(" ");
+export default function cc(...obj: (string | number | undefined)[]): string {
+  return obj.filter(c => c).join(" ");
 }

src/index.tsx

@@ -16,6 +16,11 @@ export interface TagsInputProps {
   disabled?: boolean;
   isEditOnRemove?: boolean;
   beforeAddValidate?: (tag: string, existingTags: string[]) => boolean;
+  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  classNames?: {
+    input?: string;
+    tag?: string;
+  };
 }
 
 // initialize goober once
@@ -74,6 +79,8 @@ export const TagsInput = ({
   disabled,
   isEditOnRemove,
   beforeAddValidate,
+  onKeyUp,
+  classNames,
 }: TagsInputProps) => {
   const [tags, setTags] = useState<any>(value || []);
 
@@ -112,17 +119,18 @@ export const TagsInput = ({
   return (
     <div aria-labelledby={name} className={cc("rti--container", RTIContainer)}>
       {tags.map(tag => (
-        <Tag key={tag} text={tag} remove={onTagRemove} disabled={disabled} />
+        <Tag key={tag} className={classNames?.tag} text={tag} remove={onTagRemove} disabled={disabled} />
       ))}
 
       <input
-        className={cc("rti--input", RTIInput)}
+        className={cc("rti--input", RTIInput, classNames?.input)}
         type="text"
         name={name}
         placeholder={placeHolder}
         onKeyDown={handleOnKeyUp}
         onBlur={onBlur}
         disabled={disabled}
+        onKeyUp={onKeyUp}
       />
     </div>
   );

src/tag.tsx

@@ -6,6 +6,7 @@ interface TagProps {
   text: string;
   remove: any;
   disabled?: boolean;
+  className?: string;
 }
 
 const tagStyles = css({
@@ -30,14 +31,14 @@ const tagStyles = css({
   },
 });
 
-export default function Tag({ text, remove, disabled }: TagProps) {
+export default function Tag({ text, remove, disabled, className }: TagProps) {
   const handleOnRemove = e => {
     e.stopPropagation();
     remove(text);
   };
 
   return (
-    <span className={cc("rti--tag", tagStyles)}>
+    <span className={cc("rti--tag", tagStyles, className)}>
       <span>{text}</span>
       {!disabled && (
         <button