# spfx-async-dropdown

> Asynchronous dropdown component for the SPFx property pane

Latest version **2.0.0** (published 2020-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install spfx-async-dropdown
pnpm add spfx-async-dropdown
yarn add spfx-async-dropdown
bun add spfx-async-dropdown
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-09-28 |
| First published | 2019-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.10.0 |
| Dependencies | 10 |
| Unpacked size | 470.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | clarktozer |
| Keywords | spfx, react, sharepoint, sharepoint framework, office365 |

## Links

- npm: https://www.npmjs.com/package/spfx-async-dropdown
- Repository: https://github.com/clarktozer/spfx-async-dropdown
- Issues: https://github.com/clarktozer/spfx-async-dropdown/issues
- npm.io page: https://npm.io/package/spfx-async-dropdown

## Dependencies (10)

- [react](https://npm.io/package/react.md) 16.8.5
- [react-dom](https://npm.io/package/react-dom.md) 16.8.5
- [@types/react](https://npm.io/package/@types/react.md) 16.8.8
- [@fluentui/react](https://npm.io/package/@fluentui/react.md) 7.142.0
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) 16.8.3
- [@microsoft/sp-core-library](https://npm.io/package/@microsoft/sp-core-library.md) 1.11.0
- [@microsoft/sp-webpart-base](https://npm.io/package/@microsoft/sp-webpart-base.md) 1.11.0
- [@microsoft/sp-lodash-subset](https://npm.io/package/@microsoft/sp-lodash-subset.md) 1.11.0
- [@microsoft/sp-property-pane](https://npm.io/package/@microsoft/sp-property-pane.md) 1.11.0
- [@microsoft/sp-office-ui-fabric-core](https://npm.io/package/@microsoft/sp-office-ui-fabric-core.md) 1.11.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2020-09-28
- 1.0.2 — 2020-01-14
- 1.0.1 — 2019-12-17
- 1.0.0 — 2019-12-05
- 0.0.3 — 2019-12-03
- 0.0.2 — 2019-12-03
- 0.0.1 — 2019-12-03

## README

## spfx-async-dropdown

![CI Status](https://img.shields.io/github/workflow/status/clarktozer/spfx-async-dropdown/Build)
[![npm version](https://img.shields.io/npm/v/spfx-async-dropdown.svg)](https://www.npmjs.com/package/spfx-async-dropdown)

Asynchronous dropdown component for the SPFx property pane

![Screenshot](./screenshot.gif)

## Installation

```bash
npm install spfx-async-dropdown
```

```bash
import { PropertyPaneAsyncDropdown } from "spfx-async-dropdown"
```

## Examples

#### Get lists that are in the root web using [pnpjs](https://pnp.github.io/pnpjs/)

```bash
new PropertyPaneAsyncDropdown("list", {
    label: "List",
    onLoad: async () => {
        const lists = await sp.site.rootWeb.lists.select("Id", "Title").get();
        return lists.map(list => {
            return {
                key: list.Id,
                text: list.Title
            }
        })
    },
    onPropertyChange: (property: string, newValue: any) => {
        const oldValue = get(this.properties, property);
        update(this.properties, property, () => newValue);
        this.onPropertyPaneFieldChanged(property, oldValue, newValue);
        this.render();
    },
    selectedKey: this.properties.list,
    required: true,
    tooltip: {
        content: "Testing Tooltip",
        iconName: "List"
    },
    placeholder: "Select an item...",
    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua"
})
```

## Props

| Prop                              |                                                                     Type                                                                     |
| :-------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------: |
| label<br/>_(required)_            |                                                                    string                                                                    |
| onLoad<br/>_(required)_           |                                                       () => Promise<IDropdownOption[]>                                                       |
| onPropertyChange<br/>_(required)_ |                                                  (property: string, newValue: any) => void                                                   |
| selectedKey<br/>_(required)_      |                                                               string or number                                                               |
| disabled                          |                                                                   boolean                                                                    |
| required                          |                                                                   boolean                                                                    |
| tooltip                           | IToolTip ({ content: string, iconName: string}). iconName is a [Fabric icon](https://developer.microsoft.com/en-us/fabric#/styles/web/icons) |
| placeholder                       |                                                                    string                                                                    |
| description                       |                                                                    string                                                                    |

---
_Source: https://npm.io/package/spfx-async-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._