FRH React Phone Lookup
React component for looking up phone book entries by name or number. The user can select a number to call either by
- typing part of the person's name or number, and selecting the callee from the drop-down list; or
- entering a valid phone number (for numbers that are not in the list).
Demo
Try the demo here.
Installation
npm install --save frh-react-phone-lookup
Usage
Component { superprops } { return <PhoneLookup entries = name : 'Danae Rothstein' phone : '+1-202-555-0125' name : 'Leslee Bunnell' phone : '+1-202-555-0145' name : 'Voncile Reams' phone : '202-555-0121' /> } ReactDOM
Props
Property | Type | Description | Default |
---|---|---|---|
maxResults | Number | The maximum number of items visible in the list of results. | 10 |
entries | Array | An array of phone book entries. Each object in this array must have a name , and a phone property. |
[] |
resultsComponent | Component | The component responsible for rendering the list of results. | See 'Customization' |
inputComponent | Component | The input field component. | See 'Customization' |
regexp | RegExp | The regular expression used to determine when the user input is a valid phone number. | /^(\+?[0-9]{1,3}\-?|0)[0123456789]{9}$/ |
onCallNumber | Function | A callback that runs when the user clicks the 'Call' button. | number => { console.log(number) } |
Required props
Technically, all props are optional, but you should at least provide your own entries
array and onCallNumber
hook for any useful implementation.
Format of the entries array
name : string phone : string
Customization
To change the appearance and behavior of the results drop-down or input field, you can provide your own implementation of these components as follows:
<PhoneLookup resultsComponent = MyResultsComponent inputComponent = MyInputComponent entries = ... />
See below for an explanation of the various props that are passed to these components.
Results
Props
Property | Type | Description |
---|---|---|
onSelectionChange | Function | Should be called when the user selects a result from the list with the selected entry as the parameter. |
results | Array | The array of phone book entries that should appear in the list. |
Default implementation
Component { superprops } { const results onSelectionChange = thisprops return <ul style=ulStyles> results </ul> }
Input
Props
Property | Type | Description |
---|---|---|
hasEntry | Boolean | Whether an entry is currently selected or not. |
isValidNumber | Boolean | Whether the entered value is a valid phone number or not. |
value | String | The current value. |
onReset | Function | Callback to reset the value. |
onCallNumber | Function | Callback to run when the user clicks the 'Call' button. |
onChange | Function | Change handler that receives either the value, or an event object. |
Default implementation
Component { superprops } { const hasEntry value onChange onReset onCallNumber isValidNumber = thisprops const inputStyle = hasEntry ? backgroundColor: '#fff4a8' : isValidNumber ? backgroundColor: '#a8f4a8' : {} return <div> <input type = 'text' style = inputStyle value = value onChange = onChange /> hasEntry || isValidNumber && <span> <button onClick=onReset>Reset</button> <button onClick=onCallNumber>Call</button> </span> </div> }
Example
See the source code for the demo for an example of customization, using the Bootstrap framework.
Contribute
- GitHub: https://github.com/FarmRadioHangar/react-phone-lookup
- Issue tracker: https://github.com/FarmRadioHangar/react-phone-lookup/issues
License
BSD