{"id":41718,"library":"phonenumber-formatter","title":"Phone Number Formatter","description":"A simple browser-side phone number formatter for HTML input elements. Current version 1.3.0 is stable but appears to have no recent updates. It only supports 10-digit US-style numbers and does not provide validation beyond formatting. Unlike robust libraries like libphonenumber, this package is minimal and targeted at basic input masking.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/renolc/phonenumber-formatter","tags":["javascript","phone","phonenumber","telephone","formatter","simple"],"install":[{"cmd":"npm install phonenumber-formatter","lang":"bash","label":"npm"},{"cmd":"yarn add phonenumber-formatter","lang":"bash","label":"yarn"},{"cmd":"pnpm add phonenumber-formatter","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library does not ship TypeScript types. 'require' works in CommonJS environments, but ESM import is preferred for modern bundlers.","wrong":"const formatPhonenumbers = require('phonenumber-formatter')","symbol":"formatPhonenumbers","correct":"import formatPhonenumbers from 'phonenumber-formatter'"},{"note":"The module exports a single default function, not a named export. Named import will result in undefined.","wrong":"import { formatPhonenumbers } from 'phonenumber-formatter'","symbol":"default","correct":"import formatPhonenumbers from 'phonenumber-formatter'"},{"note":"Destructuring the require result will also yield undefined, as the export is the function itself, not an object.","wrong":"const { formatPhonenumbers } = require('phonenumber-formatter')","symbol":"require","correct":"const formatPhonenumbers = require('phonenumber-formatter')"}],"quickstart":{"code":"import formatPhonenumbers from 'phonenumber-formatter';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  const input = document.getElementById('phone');\n  if (input) {\n    formatPhonenumbers(input);\n  }\n});","lang":"javascript","description":"Demonstrates how to import the default function and apply it to an input element after DOM ready."},"warnings":[{"fix":"Consider using libphonenumber-js or google-libphonenumber for international support.","message":"The library only supports 10-digit US phone numbers. Entering numbers of other lengths or international formats will result in unexpected formatting or no formatting.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Pass the DOM element directly: formatPhonenumbers(document.getElementById('phone')).","message":"The function expects an HTMLInputElement, not a string. Passing a string will cause errors or no formatting.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Create a .d.ts file: declare module 'phonenumber-formatter' { const formatPhonenumbers: (el: HTMLInputElement, callback?: () => void) => void; export default formatPhonenumbers; }","message":"The library does not provide TypeScript type definitions. Using in a TypeScript project may require a custom declaration file.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add your own validation before or after formatting using a regex or validation library.","message":"The library has no validation; it will format any 10-digit input, but does not check for valid area codes or phone number patterns beyond digits.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.3.0':18 '10':31 'appear':22 'basic':56 'beyond':42 'browser':7 'browser-sid':6 'current':16 'digit':32 'element':15 'format':43 'formatt':3,11,63 'html':13 'input':14,57 'javascript':59 'libphonenumb':48 'librari':46 'like':47 'mask':58 'minim':52 'number':2,10,36 'packag':50 'phone':1,9,60 'phonenumb':61 'provid':40 'recent':26 'robust':45 'side':8 'simpl':5,64 'stabl':20 'style':35 'support':30 'target':54 'telephon':62 'unlik':44 'updat':27 'us':34 'us-styl':33 'valid':41 'version':17","created_at":"2026-06-04T18:53:46.558103+00:00","updated_at":"2026-06-04T18:53:46.558103+00:00","problems":[{"fix":"Use 'import formatPhonenumbers from 'phonenumber-formatter'' instead of 'import { formatPhonenumbers } from 'phonenumber-formatter''.","cause":"Attempting named import instead of default import.","error":"TypeError: formatPhonenumbers is not a function"},{"fix":"Ensure default import: const formatPhonenumbers = require('phonenumber-formatter') and do not destructure.","cause":"Destructuring the require or import incorrectly, getting undefined instead of the function.","error":"undefined is not a function (evaluating 'formatPhonenumbers(...)')"},{"fix":"Guarantee the input exists and the DOM is loaded, e.g., by placing script at end of body or using DOMContentLoaded event.","cause":"The function is called with an element that does not exist or before the DOM is ready.","error":"Cannot read property 'value' of null"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/renolc/phonenumber-formatter#readme","github":"https://github.com/renolc/phonenumber-formatter","docs":null,"changelog":null,"pypi":null,"npm":"phonenumber-formatter","openapi_spec":null,"status_page":null,"smithery":null,"categories":["productivity"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}