Input Tags

hello×
world×

This component allows you to create tags for clients who want to position their brand on the internet.

You handle its state using useState.

Advantages of the component:

1. It doesn't allow creating blank tags or tags with excessive spaces at the beginning or end.
2. Tags are always added in lowercase.
3. This means that it's case-insensitive and doesn't allow duplicates.

import { useState } from "react";
import { InputTags } from "dialui-components";

export const MyComponent = () => {
  const [tagsState, setTags] = useState([]);

  return (
    <InputTags
      placeholder='Tags'
      tags={tagsState}
      setTags={setTags}
    />
  )
};a

Default Props:

tags= required;
setTags= required;
placeholder= undefined;
onBlur= undefined;

Props:

tags: string[];
setTags: (value: string[]) => void;
placeholder?: string;
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;