@reusejs/react-search-select

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:

Prop	Type/Remarks
label	String or React Component
ShowSelected	to show the selected data in styles (default it will be comma seprated)
dataSource	[{},{},{}] api data.
OptionRenderer	Customizable ( can add image, description , and title)
onChange	It will be called whenever user select or un selects an items
multiple	true or false
clearStyle	String or React Component
defaultSelected	items that should be already selected
labelWrapperStyles	to style the label of component
dropdownStyle	to customized styles of dropdown
inputStyle	to style the text input tag
placeHolderText	to change the text of placeholder
optionsStyle	to change style of options in open dropdown
disabled	to disable the whole component
customArrow	to customized arrow of dropdown from user side

• 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.