https://github.com/chr314/react-native-lookup-modal

React Native Lookup Modal
https://github.com/chr314/react-native-lookup-modal

filter lookup modal popup react-native react-native-component react-native-library search

Last synced: 26 days ago
JSON representation

React Native Lookup Modal

• Host: GitHub
• URL: https://github.com/chr314/react-native-lookup-modal
• Owner: chr314
• License: mit
• Created: 2019-04-24T08:34:34.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-20T10:41:56.000Z (over 1 year ago)
• Last Synced: 2024-12-01T12:18:41.679Z (about 1 month ago)
• Topics: filter, lookup, modal, popup, react-native, react-native-component, react-native-library, search
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-lookup-modal
• Size: 1.81 MB
• Stars: 2
• Watchers: 2
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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: '[email protected]',

    country: 'Russia'

  },

  {

    id: 2,

    name: 'Alfonse Tesche',

    tel: '436-643-1234',

    email: '[email protected]',

    country: 'Indonesia'

  },

  {

    id: 3,

    name: 'Chandler Follett',

    tel: '682-740-8794',

    email: '[email protected]',

    country: 'Greece'

  }

];

const [user, setUser] = useState();

 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                                 |