# react-rut-formatter

> Un custom hook para React que facilita el trabajo con números RUN/RUT chilenos

Latest version **0.3.0** (published 2025-10-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-rut-formatter
pnpm add react-rut-formatter
yarn add react-rut-formatter
bun add react-rut-formatter
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2025-10-08 |
| First published | 2021-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 27.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Jorge Jara |
| Maintainers | jorgejarai |
| Keywords | rut, run, custom hook, react, typescript, javascript |

## Links

- npm: https://www.npmjs.com/package/react-rut-formatter
- Repository: https://github.com/jorgejarai/react-rut-formatter
- Homepage: https://github.com/jorgejarai/react-rut-formatter#readme
- Issues: https://github.com/jorgejarai/react-rut-formatter/issues
- npm.io page: https://npm.io/package/react-rut-formatter

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^19.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^19.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2025-10-08
- 0.2.2 — 2022-07-16
- 0.2.1 — 2021-04-28
- 0.2.0 — 2021-04-20
- 0.1.1 — 2021-04-20
- 0.1.0 — 2021-04-20

## README

# `react-rut-formatter`

Este es un _custom hook_ para React que facilita el trabajo con números de RUT/RUN (Rol Único Tributario y Rol Único Nacional, respectivamente), utilizados en Chile para propósitos de identidad o tributarios.

Implementa el _hook_ `useRut`, que permite que un cuadro de texto pueda recibir un RUT o RUN, darle formato (XX.XXX.XXX-X) a medida que se escribe y verificar si este es válido.

## Cómo instalar

Para instalar `react-rut-formatter`, basta con agregar el paquete usando su administrador de paquetes de preferencia:

### NPM

```console
$ npm install react-rut-formatter
```

### Yarn

```console
$ yarn add react-rut-formatter
```

Los test incorporados pueden ejecutarse con `yarn test` o `npm run test`.

## Ejemplo

```javascript
import { useRut } from "react-rut-formatter";

const App = () => {
  const { rut, updateRut, isValid } = useRut();

  const handleSubmit = (e) => {
    e.preventDefault();

    console.log(rut.formatted);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={rut.formatted}
          onChange={(e) => updateRut(e.target.value)}
        />
        {!isValid && <span>RUT inválido</span>}
      </form>
    </div>
  );
};
```

## Cómo usar

El _hook_ `useRut` maneja automáticamente la tarea de darle formato a un RUT, dejando al programador solamente con la tarea de asociarlo a una entrada de texto, lo que se logra como en el ejemplo anterior para un `<input>` simple.

`useRut` retorna un objeto conteniendo los siguientes elementos:

- `rut`: otro objeto que contiene el RUT con los siguientes formatos:
  - `formatted`: Formato _pretty-printed_ (XX.XXX.XXX-X). Adecuado para presentación.
  - `raw`: Formato "en bruto", sin separadores de miles (XXXXXXXX-X). Adecuado como atributo o variable.
- `updateRut`: actualiza el RUT almacenado y le vuelve a dar formato como está descrito arriba.
- `isValid`: Indica si el dígito verificador del RUT es válido

### Uso avanzado

En caso de usar una librería para manejo de formularios, puede no ser práctico usar `useRut`. Para ese caso es posible usar las funciones que usa internamente el _hook_. Para eso contamos con:

- `checkRut`: Revisa si el RUT entregado tiene un dígito verificador válido
- `prettifyRut`: Formatea el RUT de la forma XX.XXX.XXX-X (para presentación)
- `formatRut`: Formatea el RUT de la forma XXXXXXXX-X (para uso interno)
- `removeSeparators`: Remueve todo carácter que no sea dígito o la letra K del RUT. Ideal para almacenar el valor internamente.

También tenemos:

- `calculateDv`: Calcula el dígito verificador de un RUT

Esto luego puede ser usado con librerías como Formik, como podemos ver a continuación:

```javascript
import { Formik } from "formik";
import { checkRut, prettifyRut, formatRut } from "react-rut-formatter";

const App = () => {
  return (
    <div>
      <Formik
        initialValues={{ rut: "" }}
        validate={(values) => {
          const errors: { rut?: string } = {};

          if (!values.rut) {
            errors.rut = "Se requiere un RUT";
          } else if (!checkRut(values.rut)) {
            errors.rut = "RUT inválido";
          }

          return errors;
        }}
        onSubmit={(values) => {
          const rut = formatRut(values.rut);

          console.log(rut);
        }}
      >
        {({
          values,
          errors,
          touched,
          handleBlur,
          handleChange,
          handleSubmit,
          setFieldValue,
        }) => (
          <form onSubmit={handleSubmit}>
            <input
              id="rut"
              name="rut"
              value={values.rut}
              onChange={handleChange}
              onBlur={(event) => {
                const formatted = prettifyRut(values.rut);
                setFieldValue("rut", formatted);

                handleBlur(event);
              }}
            />
            {errors.rut && touched.rut && <span>{errors.rut}</span>}
            <input type="submit" />
          </form>
        )}
      </Formik>
    </div>
  );
};
```

---
_Source: https://npm.io/package/react-rut-formatter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._