# react-native-lookup-modal

> React Native Lookup Modal

Latest version **3.0.1** (published 2023-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-lookup-modal
pnpm add react-native-lookup-modal
yarn add react-native-lookup-modal
bun add react-native-lookup-modal
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2023-04-19 |
| First published | 2019-04-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 0 |
| Unpacked size | 39.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Christoforos Aslanov |
| Maintainers | chr314 |
| Keywords | react-native, react-native-component, search, lookup, modal, dropdown, picker, select |

## Links

- npm: https://www.npmjs.com/package/react-native-lookup-modal
- Repository: https://github.com/chr314/react-native-lookup-modal
- Homepage: https://github.com/chr314/react-native-lookup-modal#readme
- Issues: https://github.com/chr314/react-native-lookup-modal/issues
- npm.io page: https://npm.io/package/react-native-lookup-modal

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 3.0.1 (latest) — 2023-04-19
- 2.0.0 — 2021-04-05
- 1.3.3 — 2019-07-31
- 1.3.2 — 2019-06-20
- 1.3.1 — 2019-06-12
- 1.3.0 — 2019-06-12
- 1.2.1 — 2019-05-01
- 1.2.0 — 2019-05-01
- 1.1.5 — 2019-04-30
- 1.1.4 — 2019-04-29
- 1.1.3 — 2019-04-25
- 1.1.2 — 2019-04-25
- 1.1.1 — 2019-04-25
- 1.1.0 — 2019-04-25
- 1.0.0 — 2019-04-24

## README

# React Native Lookup Modal

React Native Lookup Modal

![example gif](https://i.giphy.com/media/YH1etAKUsCplyiMwcr/giphy.webp)

## Install

`yarn add react-native-lookup-modal`

OR

`npm install react-native-lookup-modal --save`

## Usage

```javascript
import LookupModal from 'react-native-lookup-modal';

const users = [
  {
    id: 1,
    name: 'Brit Renfield',
    tel: '542-866-4301',
    email: 'brenfield0@gmail.com',
    country: 'Russia'
  },
  {
    id: 2,
    name: 'Alfonse Tesche',
    tel: '436-643-1234',
    email: 'atesche1@hotmail.com',
    country: 'Indonesia'
  },
  {
    id: 3,
    name: 'Chandler Follett',
    tel: '682-740-8794',
    email: 'cfollett2@boston.com',
    country: 'Greece'
  }
];

const [user, setUser] = useState();

<LookupModal
  data={users}
  value={user}
  onSelect={item => setUser(item)}
  displayKey={"name"}
/>
```

## Props

| Prop                    | Description                                             | Type       | Required/Default                         |
|-------------------------|---------------------------------------------------------|------------|------------------------------------------|
| `data`                  | Array of Objects                                        | `array`    | Default: `[]`                            |
| `value`                 | Selected item                                           | `object`   | Optional                                 |
| `onSelect`              | Fired when an result is selected                        | `function` | `(item) => {}`                           |
| `onCancel`              | Fired when modal is closed without selecting any result | `function` | `() => {}`                               |
| `displayKey`            | Which property is shown in results                      | `string`   | Default: `title`                         |
| `selectText`            | Text of select button                                   | `string`   | Default: `Select...`                     |
| `placeholder`           | Placeholder of TextInput                                | `string`   | Default: `Search...`                     |
| `searchFunc`            | Custom search function                                  | `function` | Default: `defaultSearchFunc(text, data)` |
| `selectButtonStyle`     | Custom select button style                              | `object`   | Optional                                 |
| `selectButtonTextStyle` | Custom select button text style                         | `object`   | Optional                                 |
| `hideSelectButton`      | Hide select button                                      | `bool`     | Default: `false`                         |
| `children`              | Custom select button                                    | `element`  | Optional                                 |
| `contentStyle`          | Custom modal content style                              | `object`   | Optional                                 |
| `itemStyle`             | Custom item style                                       | `object`   | Optional                                 |
| `itemTextStyle`         | Custom item text style                                  | `object`   | Optional                                 |

---
_Source: https://npm.io/package/react-native-lookup-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._