React tags

Tags component

import React, { useRef, useEffect } from "react";
import jSuites from "jsuites";

import "jsuites/dist/jsuites.css";

export default function Tags({ options }) {
  const tagsRef = useRef(null);

  const jsuitesTagsRef = useRef(null);

  useEffect(() => {
    if (!jsuitesTagsRef.current) {
      jsuitesTagsRef.current = jSuites.tags(tagsRef.current, options);
    } else {
      jsuitesTagsRef.current.setOptions(options);
    }
  }, [options]);

  return <div style={{ width: "400px" }} ref={tagsRef} />;
}

Component usage

import React, { useState } from "react";

import Tags from "./Tags";

export default function App() {
  const [tagsValue, setTagsValue] = useState("");

  const handleTagsChange = (element, instance, value) => {
    setTagsValue(value);
  };

  return (
    <Tags
      options={{
        value: tagsValue,
        onchange: handleTagsChange,
        limit: 3
      }}
    />
  );
}