【React】React環境でtagifyを使用する

概要

tagifyはyairEO/tagifyで紹介されている通り、タグを入力するテキストボックス用のUIライブラリです。フレームワーク無しの環境でも動きますし、ReactやVueのフレームワーク環境でも動くそうなので今回はReactで動かせるか試してみました。

前提

• 使用した「@yaireo/tagify」は4.38.0です。

前準備

tagifyのライブラリと型定義をインストールします。

npm install @yaireo/tagify
npm install -D @types/yaireo__tagify

とりあえず動くサンプル実装

以下のようなイメージでとりあえず入力欄が動きました。tailwindも一応効かせることができました。

"use client";

import { FC } from "react";
import { ChangeEventData, InputEventData, TagData } from "@yaireo/tagify";
import Tags from "@yaireo/tagify/react";
import "@yaireo/tagify/dist/tagify.css";

export const TagInputComponent: FC = () => {
  // 入力中の値が変わった場合
  const onInput = async (event: CustomEvent<InputEventData<TagData>>) => {
    const typingValue =
      "value" in event.detail ? event.detail.value : event.detail.textContent;
    console.log(typingValue);
  };

  // タグが確定して変わった場合
  const onChange = (event: CustomEvent<ChangeEventData<TagData>>) => {
    const commitTags = event.detail.tagify.value;
    console.log(commitTags);
  };

  return (
    <Tags
      settings={{
        delimiters: " |　",
        trim: false,
      }}
      placeholder="スペース入力でタグ区切り"
      onInput={onInput}
      onChange={onChange}
      className="!min-h-[42px] w-[350px] !rounded-md !border-[1.5px] border-gray-400 bg-transparent text-sm shadow-sm transition-colors placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-950 focus:border-gray-950 focus-within:outline-none focus-within:ring-1 focus-within:ring-gray-950 focus-within:border-gray-950 disabled:cursor-not-allowed disabled:opacity-50"
    />
  );
};