frh-react-phone-lookup v0.1.1

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

import React       from 'react'
import ReactDOM    from 'react-dom'
import PhoneLookup from 'frh-react-phone-lookup'

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    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.render(
  <App />,
  document.getElementById('main')
)

Props

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

Default implementation

class DefaultResults extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    const { results, onSelectionChange } = this.props
    return (
      <ul style={ulStyles}>
        {results.map((result, key) => {
          return (
            <li key={key}>
              <span style={{float: 'right'}}>
                {result.phone}
              </span>
              <a href='#' onClick={() => onSelectionChange(result)}>
                {result.name} 
              </a>
            </li>
          )
        })}
      </ul>
    )
  }
}

Input

Props

Default implementation

class DefaultInput extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    const { hasEntry, value, onChange, onReset, onCallNumber, isValidNumber } = this.props
    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