react-international-phone-input is a React component for international phone number input with validation.

Installation

Install the package with npm:

  npm i react-international-phone-input

Usage

import { PhoneInput } from 'react-international-phone-input';

function App() {
  const [phone, setPhone] = useState('');

  return (
    <PhoneInput
      defaultCountry="IT"
      value={phone}
      onChange={setPhone}
      label="Phone Number"
      placeholder="Enter phone number"
    />
  );
}

Props

• label: Optional label for the input

• value: The phone number value

• onChange: Callback when value changes

• onBlur: Optional blur handler

• error: Error message to display

• showValidMessage: Whether to show valid message (default: true)

• disabled: Disable the input

• name: Input name attribute

• validateOnChange: Optional validation callback

• className: Additional CSS classes

• useStep<T>: Manages step-based navigation by keeping track of the current step index and providing functions to move forward, backward, and reset.

• useTimeoutFn: Executes a callback function after a specified delay and provides functions to reset or clear the timeout.

• useDebouncedCallback: Delays the execution of a callback function until after a specified delay, resetting the delay on each call to prevent frequent execution.

• useScrollLock: Locks or unlocks scrolling on the webpage when the lock parameter changes.

• useResizeObserver<T>: Observes and returns the dimensions of an HTML element using the ResizeObserver API.

• useMousePosition: Tracks the user's mouse position in real-time and returns the coordinates.

• useScrollDirection: Determines whether the user is scrolling up or down based on window scroll position changes.

• useImageLoader: Loads an image and provides loaded and error states to track its loading status.

• usePersistedState<T>: Stores and retrieves state from localStorage to persist data across page reloads.

• useReducedMotion: Detects if the user has enabled the "Reduce Motion" accessibility setting in their system preferences.

• useCookie: Manages cookies by providing functions to get, set, and delete a specific cookie by its key.

• useFetchRetry: Performs an HTTP request with retry logic, retrying a specified number of times upon failure before returning an error.

• useDelay: Delays the update of a value for a specified amount of time before reflecting it in the state.

• useVisibilityChange: Tracks the visibility state of the document and returns whether the page is currently visible or hidden.

• useDebouncedValue: Debounces a value to avoid immediate changes, returning the delayed value after a specified delay.

• useAsync: Handles the state of an asynchronous function, including loading, success, and error states, with the ability to trigger the execution of the async operation.

• useScript: Dynamically loads an external script, managing its loading, ready, and error states, and optionally removes the script on unmount.

• useReducedMotion: Detects if the user has enabled the "Reduce Motion" accessibility setting and returns a boolean indicating whether reduced motion is preferred.

• useIndexedDB: Fetches data from an IndexedDB store, handling errors and updating the state with the fetched data.

• useGeoLocation: Retrieves the user's current geographic location and returns it along with any error encountered.

• useTimer: Starts a countdown timer that updates the time every second, returning the current time and any errors.

• useIsMounted: Tracks whether the component is mounted or unmounted, returning a boolean value indicating the component's mount status.

• useCss: Dynamically applies custom CSS to the document and removes it when the component unmounts, handling any errors during the process.

• useSpeak: Converts text to speech using the Web Speech API, allowing the text to be spoken and handling errors.

• useCountUp: Animates a counter that counts up from 0 to a target value within a specified duration, returning the current count and any errors.

• useCountDown: Counts down from a specified start value to zero, updating every second and returning the current count and any errors.

• useBattery: Monitors the battery status of the device, including level, charging status, and remaining charging or discharging time.

• useEventListener: Listens for a specified event on an element or window, and triggers the handler function when the event is fired. It ensures proper cleanup when the component is unmounted.

• useHistory: Provides methods to navigate the browser history, including pushing and replacing history states, as well as moving back and forward in the history stack.

• usePreferredLanguage: Retrieves the user's preferred language and languages from the browser, and checks if the browser supports the language APIs.

• useSessionStorage: Stores and retrieves data from the sessionStorage API, persisting the data during the session. It provides a getter and setter for session-based data.

• useSound: Controls the playback of an audio file, including play, pause, and stop functionalities, while also managing the audio volume and handling any errors.

• useTouch: Tracks touch events on a given DOM element, returning the touch positions for touchstart, touchmove, and touchend.

• useUpdateEffect: Executes a side effect on updates after the initial render, skipping the effect during the first render to avoid unnecessary executions.

License

MIT