PhoneNumberField Component

The PhoneNumberField component in goobs-frontend is a specialized input field designed for entering and formatting phone numbers. It provides a user-friendly interface with automatic formatting and various styling options.

Importing the Component

To use the PhoneNumberField component in your project, import it from the goobs-frontend package:

import { PhoneNumberField } from 'goobs-frontend';

Basic Usage

Here's a basic example of how to use the PhoneNumberField component:

import React from 'react';
import { PhoneNumberField } from 'goobs-frontend';

const PhoneNumberFieldExample: React.FC = () => {
  return (
    <PhoneNumberField
      label="Phone Number"
      onChange={() => console.log('Phone number changed')}
    />
  );
};

export default PhoneNumberFieldExample;

Props

The PhoneNumberField component accepts the following props:

• initialValue: string (optional) - The initial value of the field.
• onChange: () => void (optional) - Callback function triggered when the value changes.
• backgroundcolor: string (optional) - Background color of the input field.
• outlinecolor: string (optional) - Color of the input field outline.
• fontcolor: string (optional) - Color of the text inside the input field.
• label: string (optional, default: 'Phone Number') - Label for the input field.

Additionally, it supports all standard Material-UI TextField props except for onChange.

Features

1. Automatic Formatting: Formats the input as a US phone number (e.g., +1 123-456-7890).
2. Input Masking: Automatically adds the country code (+1) and hyphens.
3. Customizable Styling: Supports custom colors for background, outline, and font.
4. Accessibility: Includes proper labeling and ARIA attributes for screen readers.

Styling

You can customize the appearance of the PhoneNumberField component using the provided props. Here's an example with custom styling:

import React from 'react';
import { PhoneNumberField } from 'goobs-frontend';

const StyledPhoneNumberFieldExample: React.FC = () => {
  return (
    <PhoneNumberField
      label="Custom Styled Phone Number"
      backgroundcolor="#f0f0f0"
      outlinecolor="#3f51b5"
      fontcolor="#333"
      onChange={() => console.log('Phone number changed')}
    />
  );
};

export default StyledPhoneNumberFieldExample;

Advanced Usage

With Form Validation

You can use the PhoneNumberField component within a form with custom validation:

import React, { useState } from 'react';
import { PhoneNumberField } from 'goobs-frontend';

const ValidatedPhoneNumberFieldExample: React.FC = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [error, setError] = useState<string | null>(null);

  const handleChange = () => {
    const newPhoneNumber = document.querySelector('input').value;
    setPhoneNumber(newPhoneNumber);
    
    // Simple validation: check if the phone number is complete
    if (newPhoneNumber.replace(/\D/g, '').length !== 11) {
      setError('Please enter a complete phone number');
    } else {
      setError(null);
    }
  };

  return (
    <PhoneNumberField
      label="Enter your phone number"
      initialValue={phoneNumber}
      onChange={handleChange}
      error={!!error}
      helperText={error}
    />
  );
};

export default ValidatedPhoneNumberFieldExample;

With Custom Formatting

While the component uses a default US phone number format, you can implement custom formatting for international numbers:

import React, { useState } from 'react';
import { PhoneNumberField } from 'goobs-frontend';

const CustomFormattingPhoneNumberFieldExample: React.FC = () => {
  const [phoneNumber, setPhoneNumber] = useState('');

  const formatInternationalNumber = (input: string) => {
    // This is a simple example and may need to be adjusted for different country formats
    const numbers = input.replace(/\D/g, '');
    let formatted = '';
    if (numbers.length > 0) {
      formatted += '+' + numbers.substring(0, 2);
      if (numbers.length > 2) {
        formatted += ' ' + numbers.substring(2, 5);
        if (numbers.length > 5) {
          formatted += ' ' + numbers.substring(5, 8);
          if (numbers.length > 8) {
            formatted += ' ' + numbers.substring(8);
          }
        }
      }
    }
    return formatted;
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatInternationalNumber(event.target.value);
    setPhoneNumber(formatted);
  };

  return (
    <PhoneNumberField
      label="International Phone Number"
      value={phoneNumber}
      onChange={handleChange}
    />
  );
};

export default CustomFormattingPhoneNumberFieldExample;

Accessibility

The PhoneNumberField component is designed with accessibility in mind:

• It uses proper labeling to describe the input field's purpose.
• The component is keyboard accessible.
• It supports screen readers for announcing the current value and changes.

To further enhance accessibility:

1. Provide clear instructions for the expected phone number format.
2. Ensure error messages are descriptive and helpful.
3. Consider adding ARIA live regions for dynamic feedback on input validity.

Best Practices

1. Clear Labels: Use descriptive labels to indicate the purpose of the phone number field.
2. Format Expectations: Clearly communicate the expected phone number format to users.
3. Error Handling: Provide clear error messages for invalid inputs.
4. International Considerations: If your application is used internationally, consider supporting multiple phone number formats.
5. Validation: Implement both client-side and server-side validation for phone numbers.

Performance Considerations

The PhoneNumberField component is generally lightweight, but keep in mind:

• The formatting function runs on every input change. For very large forms with multiple phone number fields, consider debouncing the formatting function.
• If implementing custom international formatting, ensure your formatting function is optimized for performance.

Troubleshooting

1. Formatting Issues: If the phone number isn't formatting correctly, check that you haven't overridden the default formatting behavior unintentionally.
2. Styling Problems: Verify that your custom styles aren't conflicting with the component's built-in styles.
3. Validation Errors: Ensure that your validation logic accounts for the formatted nature of the phone number input.

By leveraging these features and following the best practices, you can effectively use the PhoneNumberField component in your goobs-frontend projects to create user-friendly phone number input interfaces with proper formatting and validation.