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 (
    <div>
        <h1>Buscar Cliente</h1>
        <CedulaInput
            value={cedula}
            onChange={setCedula}
            onEnter={() => buscarCliente(cedula)}
        />
    </div>
);

};

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