@reusejs/react-search-select v0.0.22

Select Dropdown

<SearchSelect
          label={<Label />}
          ShowSelected={CustomShowLabel}
          dataSource={async (query) => {
            let options = await searchUsers(query);
            return options;
          }}
          OptionRenderer={Option}
          onChange={(v) => {
            console.log("onchange", v);
          }}
          multiple={true}
          clearStyle={<Clear />}
        />

Props:

• Label
  Label can be passed as prop that can be a component with styles or a simple string.

  const Label = () => {
    return <p style={{ color: "green" }}>Select Status</p>;
  };```

• Clear Text Clear text be passed as prop that can be a component with styles or a simple string.

  const Clear = () => {
    return <p style={{ color: "red" }}>Clear</p>;
  };```

• ShowSelected can be passed from user side to style default selected data. if its not passed then selected data will be comma separated.

  const CustomShowLabel = ({ selected }) => {
        const [text, setText] = useState("None Selected");
        useEffect(() => {
          if (selected.length > 0) {
            let tempText = selected.map((val) => val.label).join("; ");
            setText(tempText);
          } else {
            setText("None Selected");
          }
        }, [selected]);
        return <>{text}</>;
      };```

• DataSource to pass data as options, it is used for API data.

  const searchUsers = (q = "") => {
        if (q !== "") {
          return new Promise((resolve, reject) => {
            axios
              .get("https://api.github.com/search/users", {
                params: { q }
              })
              .then(function (response) {
                let data = response.data.items.map((i) => {
                  return { value: i.login, label: i.login, avatar: i.avatar_url };
                });
                resolve(data);
              });
          });
        } else {
          return [];
        }
      };

for above implementation prop will be passed like this

dataSource={async (query) => {
                let options = await searchUsers(query);
                return options;
              }}```

• OptionRenderer to style the options can be customized to add title, image and description. it will return a jsx element which is a list of options.

        const [found, setFound] = useState(false);
        useEffect(() => {
          let localFound = selected.some((current) => current.value === value.value);
          setFound(localFound === false ? false : true);
        }, [selected]);
        return (
          <div className="p-2 hover:bg-blue-400 cursor-pointer flex flex-row items-center relative">
            <span className="flex flex-row items-center">
              <img className="h-4 mr-2" src={value.avatar} alt={value.label} />
              <span>{value.label}</span>
            </span>
            {found === true && (
              <span className="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
                <svg
                  className="h-5 w-5"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fillRule="evenodd"
                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
            )}
          </div>
        );
      };```
      

for selected component user can add a svg of right tick or something else, if data has image or some more details user can also add that.

• onChange onChange prop is used to handle and keep track of selected and unselected data.
• Multiple It can be true and false (default false), if user want multiple selected data user can enable it.