bpk-component-phone-input

Backpack phone input component.

Installation

npm install bpk-component-phone-input --save-dev

Usage

import React, { Component } from 'react';
import BpkPhoneInput from 'bpk-component-phone-input';
import BpkImage from 'bpk-component-image';

const DIALING_CODE_TO_ID_MAP = {
  '44': 'uk',
  '55': 'br',
};

const getFlag = dialingCode => {
  const countryCode = DIALING_CODE_TO_ID_MAP[dialingCode];
  const url = `/resources/${countryCode}.png`;

  return <BpkImage altText="Flag" height={38} width={50} src={url} />;
};

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = { dialingCode: '44', phoneNumber: '' };
  }

  onChange = evt => {
    this.setState({ phoneNumber: evt.target.value });
  };

  onDialingCodeChange = evt => {
    this.setState({ dialingCode: evt.target.value });
  };

  render() {
    return (
      <BpkPhoneInput
        id="phone-input-id"
        name="Telephone input"
        label="Telephone number"
        onChange={this.onChange}
        onDialingCodeChange={this.onDialingCodeChange}
        value={this.state.phoneNumber}
        dialingCode={this.state.dialingCode}
        dialingCodes={[
          { code: '44', description: '+44' },
          { code: '55', description: '+55' },
        ]}
        dialingCodeProps={{
          id: 'dialing-code',
          name: 'Dialing code',
          label: 'Dialing code',
          'aria-label': 'Dialing code',
          image: getFlag(this.state.dialingCode),
        }}
      />
    );
  }
}

Props

| Property | PropType | Required | Default Value | | ------------------- | ----------------------------------------------------- | -------- | ------------- | | dialingCode | string | true | - | | dialingCodeProps | shape({ id: string, name: string, label: string }) | true | - | | dialingCodes | arrayOf(shape({ code: string, description: string })) | true | - | | id | string | true | - | | name | string | true | - | | label | string | true | - | | onChange | func | true | - | | onDialingCodeChange | func | true | - | | value | string | true | - | | className | string | false | null | | dialingCodeMask | boolean | false | null | | disabled | boolean | false | false | | large | boolean | false | false | | valid | boolean | false | null | | wrapperProps | object | false | {} |

dialingCodeProps

Note that id, name and label are required but more properties can be provided, e.g. dialingCodeProps={{ id: 'id', name: 'name', label: 'label', className: 'some-class' }}. All properties will be forwarded to the underlying BpkSelect component.

dialingCodes

The same is true for dialingCodes. Each object must have a code and description, but can have more properties and those will be forwarded the the option element they represent. Note that, when using the dialingCodeMask option, all dialingCodes values must have a numberPrefix attribute.