cpf-cnpj-formatter
Version:
A simple formatter for CPF and CNPJ numbers
59 lines (58 loc) • 3.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_hook_form_1 = require("react-hook-form");
const src_1 = require("../src");
const Example = () => {
const { register, handleSubmit, setValue } = (0, react_hook_form_1.useForm)();
const [maskedValue, setMaskedValue] = (0, react_1.useState)('');
const [validationError, setValidationError] = (0, react_1.useState)();
const handleInputChange = (e) => {
const value = e.target.value;
const numbers = value.replace(/\D/g, '');
const limitedNumbers = numbers.length <= 11
? numbers.slice(0, 11)
: numbers.slice(0, 14);
const { formatted, validation } = (0, src_1.formatCPFCNPJ)(limitedNumbers);
setMaskedValue(formatted);
setValue('document', limitedNumbers);
setValidationError(validation.isValid ? undefined : validation.error);
};
const onSubmit = (data) => {
const { validation } = (0, src_1.formatCPFCNPJ)(data.document);
if (validation.isValid) {
console.log('Documento válido:', data.document);
}
else {
console.error('Erro de validação:', validation.error);
}
};
return ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '400px', margin: '20px auto', padding: '20px' }, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '20px' }, children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "document", style: {
display: 'block',
marginBottom: '8px',
fontWeight: 'bold'
}, children: "CPF/CNPJ" }), (0, jsx_runtime_1.jsx)("input", { id: "document", type: "text", ...register('document'), value: maskedValue, onChange: handleInputChange, style: {
width: '100%',
padding: '8px',
fontSize: '16px',
borderRadius: '4px',
border: validationError ? '1px solid red' : '1px solid #ccc'
}, placeholder: "Digite o CPF ou CNPJ" }), validationError && ((0, jsx_runtime_1.jsx)("p", { style: {
marginTop: '4px',
fontSize: '12px',
color: 'red'
}, children: validationError })), (0, jsx_runtime_1.jsx)("p", { style: {
marginTop: '4px',
fontSize: '12px',
color: '#666'
}, children: maskedValue.length <= 14 ? 'CPF' : 'CNPJ' })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", style: {
padding: '10px 20px',
backgroundColor: '#007bff',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
}, children: "Enviar" })] }) }));
};
exports.default = Example;