{"id":41826,"library":"react-data-formatter","title":"react-data-formatter","description":"A JavaScript library for formatting Brazilian data such as CPF, CNPJ, CEP, phone numbers, currency, vehicle plates, and gender. Current stable version is 1.1.6. It provides simple formatting functions that can be used directly in React components. Key differentiators include support for multiple Brazilian format types and easy integration with React.","status":"active","version":"1.1.6","language":"javascript","source_language":"en","source_url":"https://github.com/robianchini/react-data-formatter","tags":["javascript"],"install":[{"cmd":"npm install react-data-formatter","lang":"bash","label":"npm"},{"cmd":"yarn add react-data-formatter","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-data-formatter","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The library is designed for use with React, though it can be used without React as pure formatting functions.","package":"react","optional":true}],"imports":[{"note":"The library exports named functions, not a default export.","wrong":"import formatCPF from 'react-data-formatter'","symbol":"formatCPF","correct":"import { formatCPF } from 'react-data-formatter'"},{"note":"Works with both ES modules and CommonJS.","wrong":"const { formatCurrency } = require('react-data-formatter'); // This works with CJS but may cause issues in ESM environments.","symbol":"formatCurrency","correct":"import { formatCurrency } from 'react-data-formatter'"},{"note":"formatDocument auto-detects CPF vs CNPJ based on input length.","wrong":"import { formatCpf } from 'react-data-formatter' // Note the casing: correct is 'formatCPF' with uppercase, not 'formatCpf'.","symbol":"formatDocument","correct":"import { formatDocument } from 'react-data-formatter'"}],"quickstart":{"code":"import React from 'react';\nimport { formatCPF, formatPhone, formatCurrency } from 'react-data-formatter';\n\nfunction Example() {\n  const cpf = '10425156621';\n  const phone = '11999999999';\n  const value = '1234.56';\n  return (\n    <div>\n      <p>CPF: {formatCPF(cpf)}</p>\n      <p>Phone: {formatPhone(phone)}</p>\n      <p>Currency: {formatCurrency(value)}</p>\n    </div>\n  );\n}\nexport default Example;","lang":"javascript","description":"Shows basic usage of three common formatting functions: CPF, phone number, and currency."},"warnings":[{"fix":"Pass only digits, e.g., '10425156621' not '104.251.566-21'.","message":"Input must be a string without formatting (digits only) for most formatters.","severity":"gotcha","affected_versions":"all"},{"fix":"Use the correct casing: formatCPF, formatCNPJ, formatZipCode, etc.","message":"The function names differ from the format type: e.g., 'formatCPF' not 'formatCpf'.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.1.6':28 'brazilian':10,48 'cep':16 'cnpj':15 'compon':41 'cpf':14 'currenc':19 'current':24 'data':3,11 'differenti':43 'direct':38 'easi':52 'format':9,32,49 'formatt':4 'function':33 'gender':23 'includ':44 'integr':53 'javascript':6,56 'key':42 'librari':7 'multipl':47 'number':18 'phone':17 'plate':21 'provid':30 'react':2,40,55 'react-data-formatt':1 'simpl':31 'stabl':25 'support':45 'type':50 'use':37 'vehicl':20 'version':26","created_at":"2026-06-04T18:54:17.429836+00:00","updated_at":"2026-06-04T18:54:17.429836+00:00","problems":[{"fix":"Use import { formatCPF } from 'react-data-formatter'.","cause":"Incorrect import: likely used default import instead of named import.","error":"Uncaught TypeError: formatCPF is not a function"},{"fix":"Run npm install react-data-formatter or yarn add react-data-formatter.","cause":"Package not installed or not in node_modules.","error":"Module not found: Can't resolve 'react-data-formatter'"}],"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/robianchini/react-data-formatter#readme","github":"https://github.com/robianchini/react-data-formatter","docs":null,"changelog":null,"pypi":null,"npm":"react-data-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}}