Cedula Input Mask

A React component for validating and formatting Costa Rican ID (cédula) inputs in a user-friendly manner. The component supports formatting the input as 1-XXXX-XXXX and ensures only valid characters are entered.

Installation

Install the package via npm:

npm install cedula-input-mask

Usage

Import and use the CedulaInput component in your React project:

import React, { useState } from 'react';
import CedulaInput from 'cedula-input-mask';

const App = () => {
const [cedula, setCedula] = useState('');

const buscarCliente = async (cedula: string) => {
try {
const response = await fetch(/api/commons/clientes?cedula=${cedula});
if (!response.ok) {
throw new Error('Cliente no encontrado');
}
const data = await response.json();
console.log('Datos del cliente:', data);
} catch (error) {
console.error('Error al buscar cliente:', error);
}
};

return (

);
};

export default App;

Props

The CedulaInput component accepts the following props:

Prop

Type

Description

value

string

The current value of the input field.

onChange

(value: string) => void

Callback function to handle input value changes.

onEnter

() => void

Callback function triggered when the Enter key is pressed.

Features

Input Validation: Ensures that only numbers are entered.

Auto-Formatting: Formats the input as 1-XXXX-XXXX.

Keyboard Support: Executes a callback function when the Enter key is pressed.

Development

Clone the repository and install dependencies:

git clone https://github.com/yourusername/cedula-input-mask.git
cd cedula-input-mask
npm install

Run the development server:

npm start

Build the package:

npm run build

License

This project is licensed under the MIT License. See the LICENSE file for details