Skip to content

heshamsalehmohammed/react-lazy-dropdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-lazy-dropdown

[react-lazy-dropdown] is a very useful react component for multi selection dropdown based on lazy loading option by API calls with async lazy Filtering, Sorting and Tags with custom functions can be provided from the outside

lazy loading multi selection with tags and lazy async filter

Screenshot

lazy loading single selection and lazy async filter

Screenshot

Installation

npm install react-lazy-dropdown

Usage

import {LazySelect} from 'react-lazy-dropdown/dist/index';


  const displayShowMoreOptionCallBack = (selectedOptions) => {
    alert(selectedOptions.length +" items selected");
  };

  const selectionChangedCallBack = (selectedOptions) => {
    console.log(selectedOptions.length +" items selected");
  };


  return (
    <>
      <div className="m-5" style={{width: '500px'}}>
        <LazySelect
          ApiURL={
            'https://--------/Get-------List'
          }
          UniqueKey={'Id'} // object unique key - must be unique per object
          DisplayBy={'Name'}
          PlaceHolder={'Select Methods'}
          useQueryParams={false}
          useBodyParams={true}
          RequestMethod={'post'}
          ExistingRequestParams={{
            FilterByPlatform: false,
            -----------------------,
          }}
          ExistingRequestHeaders={{
            Authorization: `bearer eyJhbGciOi-----------------`,
          }}
          PageSize={10}
          SearchRequestParamName={'search'}
          StartFromRequestParamName={'From'}
          PageSizeRequestParamName={'Size'}
          ResponseResultsHierarchy={'data/Value/Results'}
          DisplayShowMoreOption={true}
          MaximunOptionToShow={3}
          DisplayShowMoreOptionCallBack={displayShowMoreOptionCallBack}
          SelectionChangedCallBack={selectionChangedCallBack}
          IsMulti={true}
          ShowTags={true}
        />
      </div>
    </>
  );

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published