npm package: @reusejs/react-search-select
Description: Select Dropdown
Latest version: 0.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:


| 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 Option = ({ value, selected }) => {
          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.