Getting Started

Components

Typography

Utilities

Visualization Components

PhoneInput

Enhanced TextInput using JS wrapper of Google's Android phone number lib.

Browser autocompletion is slightly bugged in Chrome as for now.

Make sure to put a <PhoneInput /> into a <form/> otherwise web-browser's "autocomplete" feature may not be working: a user will be selecting his phone number from the list but nothing will be happening.

Props

countries

Array<{}>

[]

countriesLoading

Bool

false

defaultCountryCode

String

"US"

defaultPhoneNumber

String

[Empty string]

fetchCountries

Func

required

isSearchable

Bool

false

maxLength

Number

minLength

Number

name

String

[Empty string]

onBlur

Func

onChange

Func

required

onCountryChange

Func

placeholder

String

"Enter a phone number"

userLocationLoading

Bool

false

validate

Bool

true

Note: defaultPhoneNumber and defaultCountryCode props are not required, since all the logic is also handled locally.

Examples

Default PhoneInput

Value:

<State
  initial={{
    countriesLoading: false,
    countries: [],
    value: '',
    sessionStorageCountriesKey: 'kw-countries',
  }}
>
  {({ state, setState }) => {
    const clearCountriesSessionStorage = () => {
      sessionStorage.removeItem(state.sessionStorageCountriesKey)
      setState({ countries: [] })
    }
    const fakeFetchCountries = () => {
      setState({ countriesLoading: true })
      const countries = [
        {
          value: 'DE',
          label: 'Germany',
        },
        {
          value: 'PL',
          label: 'Poland',
        },
        {
          value: 'US',
          label: 'United States',
        },
      ]
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(setState({ countries, countriesLoading: false }))
          sessionStorage[state.sessionStorageCountriesKey] = JSON.stringify(
            countries,
          )
        }, 5000)
      })
    }
    return (
      <>
        <PhoneInput
          isSearchable
          name="some-phone-number"
          onChange={(name, phoneNumber) => {
            setState({ value: phoneNumber })
          }}
          onCountryChange={(name, countryCode) => {
            console.log('countryCode', countryCode)
          }}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fakeFetchCountries}
        />
        <Divider />
        Value: {state.value}
        <Divider />
        {typeof sessionStorage !== 'undefined' &&
          sessionStorage[state.sessionStorageCountriesKey] && (
            <>
              <Button onClick={clearCountriesSessionStorage}>
                Clear countries session storage
              </Button>
              <Divider />
            </>
          )}
      </>
    )
  }}
</State><State
  initial={{
    countriesLoading: false,
    countries: [],
    value: '',
    sessionStorageCountriesKey: 'kw-countries',
  }}
>
  {({ state, setState }) => {
    const clearCountriesSessionStorage = () => {
      sessionStorage.removeItem(state.sessionStorageCountriesKey)
      setState({ countries: [] })
    }
    const fakeFetchCountries = () => {
      setState({ countriesLoading: true })
      const countries = [
        {
          value: 'DE',
          label: 'Germany',
        },
        {
          value: 'PL',
          label: 'Poland',
        },
        {
          value: 'US',
          label: 'United States',
        },
      ]
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(setState({ countries, countriesLoading: false }))
          sessionStorage[state.sessionStorageCountriesKey] = JSON.stringify(
            countries,
          )
        }, 5000)
      })
    }
    return (
      <>
        <PhoneInput
          isSearchable
          name="some-phone-number"
          onChange={(name, phoneNumber) => {
            setState({ value: phoneNumber })
          }}
          onCountryChange={(name, countryCode) => {
            console.log('countryCode', countryCode)
          }}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fakeFetchCountries}
        />
        <Divider />
        Value: {state.value}
        <Divider />
        {typeof sessionStorage !== 'undefined' &&
          sessionStorage[state.sessionStorageCountriesKey] && (
            <>
              <Button onClick={clearCountriesSessionStorage}>
                Clear countries session storage
              </Button>
              <Divider />
            </>
          )}
      </>
    )
  }}
</State>

PhoneInput with defaultCountryCode and defaultPhoneNumber

Value: +1555555555

<State
  initial={{
    countriesLoading: false,
    countries: [],
    formattedPhoneNumber: '+1555555555',
    phoneNumber: '555 555 555',
    countryCode: 'US',
    sessionStorageCountriesKey: 'kw-countries',
  }}
>
  {({ state, setState }) => {
    const clearCountriesSessionStorage = () => {
      sessionStorage.removeItem(state.sessionStorageCountriesKey)
      setState({ countries: [] })
    }
    const fakeFetchCountries = () => {
      setState({ countriesLoading: true })
      const countries = [
        {
          value: 'DE',
          label: 'Germany',
        },
        {
          value: 'PL',
          label: 'Poland',
        },
        {
          value: 'US',
          label: 'United States',
        },
      ]
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(setState({ countries, countriesLoading: false }))
          sessionStorage[state.sessionStorageCountriesKey] = JSON.stringify(
            countries,
          )
        }, 5000)
      })
    }
    return (
      <>
        <PhoneInput
          defaultCountryCode={state.countryCode}
          defaultPhoneNumber={state.phoneNumber}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fakeFetchCountries}
          name="phoneNumber"
          onChange={(name, formattedPhoneNumber, phoneNumber) => {
            setState({ formattedPhoneNumber, phoneNumber })
          }}
        />
        <Divider />
        Value: {state.formattedPhoneNumber}
        <Divider />
        {typeof sessionStorage !== 'undefined' &&
          sessionStorage[state.sessionStorageCountriesKey] && (
            <>
              <Button onClick={clearCountriesSessionStorage}>
                Clear countries session storage
              </Button>
              <Divider />
            </>
          )}
      </>
    )
  }}
</State><State
  initial={{
    countriesLoading: false,
    countries: [],
    formattedPhoneNumber: '+1555555555',
    phoneNumber: '555 555 555',
    countryCode: 'US',
    sessionStorageCountriesKey: 'kw-countries',
  }}
>
  {({ state, setState }) => {
    const clearCountriesSessionStorage = () => {
      sessionStorage.removeItem(state.sessionStorageCountriesKey)
      setState({ countries: [] })
    }
    const fakeFetchCountries = () => {
      setState({ countriesLoading: true })
      const countries = [
        {
          value: 'DE',
          label: 'Germany',
        },
        {
          value: 'PL',
          label: 'Poland',
        },
        {
          value: 'US',
          label: 'United States',
        },
      ]
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(setState({ countries, countriesLoading: false }))
          sessionStorage[state.sessionStorageCountriesKey] = JSON.stringify(
            countries,
          )
        }, 5000)
      })
    }
    return (
      <>
        <PhoneInput
          defaultCountryCode={state.countryCode}
          defaultPhoneNumber={state.phoneNumber}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fakeFetchCountries}
          name="phoneNumber"
          onChange={(name, formattedPhoneNumber, phoneNumber) => {
            setState({ formattedPhoneNumber, phoneNumber })
          }}
        />
        <Divider />
        Value: {state.formattedPhoneNumber}
        <Divider />
        {typeof sessionStorage !== 'undefined' &&
          sessionStorage[state.sessionStorageCountriesKey] && (
            <>
              <Button onClick={clearCountriesSessionStorage}>
                Clear countries session storage
              </Button>
              <Divider />
            </>
          )}
      </>
    )
  }}
</State>

PhoneInput without validation

Value:

<State
  initial={{
    countriesLoading: false,
    countries: [],
    value: '',
    sessionStorageCountriesKey: 'kw-countries',
  }}
>
  {({ state, setState }) => {
    const clearCountriesSessionStorage = () => {
      sessionStorage.removeItem(state.sessionStorageCountriesKey)
      setState({ countries: [] })
    }
    const fakeFetchCountries = () => {
      setState({ countriesLoading: true })
      const countries = [
        {
          value: 'DE',
          label: 'Germany',
        },
        {
          value: 'PL',
          label: 'Poland',
        },
        {
          value: 'US',
          label: 'United States',
        },
      ]
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(setState({ countries, countriesLoading: false }))
          sessionStorage[state.sessionStorageCountriesKey] = JSON.stringify(
            countries,
          )
        }, 5000)
      })
    }
    return (
      <>
        <PhoneInput
          defaultCountryCode="US"
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fakeFetchCountries}
          name="phoneNumber"
          onChange={(name, value) => {
            setState({ value })
          }}
          validate={false}
        />
        <Divider />
        Value: {state.value}
        <Divider />
        {typeof sessionStorage !== 'undefined' &&
          sessionStorage[state.sessionStorageCountriesKey] && (
            <>
              <Button onClick={clearCountriesSessionStorage}>
                Clear countries session storage
              </Button>
              <Divider />
            </>
          )}
      </>
    )
  }}
</State><State
  initial={{
    countriesLoading: false,
    countries: [],
    value: '',
    sessionStorageCountriesKey: 'kw-countries',
  }}
>
  {({ state, setState }) => {
    const clearCountriesSessionStorage = () => {
      sessionStorage.removeItem(state.sessionStorageCountriesKey)
      setState({ countries: [] })
    }
    const fakeFetchCountries = () => {
      setState({ countriesLoading: true })
      const countries = [
        {
          value: 'DE',
          label: 'Germany',
        },
        {
          value: 'PL',
          label: 'Poland',
        },
        {
          value: 'US',
          label: 'United States',
        },
      ]
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(setState({ countries, countriesLoading: false }))
          sessionStorage[state.sessionStorageCountriesKey] = JSON.stringify(
            countries,
          )
        }, 5000)
      })
    }
    return (
      <>
        <PhoneInput
          defaultCountryCode="US"
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fakeFetchCountries}
          name="phoneNumber"
          onChange={(name, value) => {
            setState({ value })
          }}
          validate={false}
        />
        <Divider />
        Value: {state.value}
        <Divider />
        {typeof sessionStorage !== 'undefined' &&
          sessionStorage[state.sessionStorageCountriesKey] && (
            <>
              <Button onClick={clearCountriesSessionStorage}>
                Clear countries session storage
              </Button>
              <Divider />
            </>
          )}
      </>
    )
  }}
</State>

PhoneInput

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Props