React tags
Tags working example
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
}}
/>
);
}