react-simple-cep-mask v0.1.4

React simple input mask for brazilian zipcode format.

Simple \ wrapper to mask the value with a BR zipcode mask. \ It will apply all the props given to it, to an input field, enabling any customization.

Componente para adicionar máscara de cep sem dependências. Os props são copiados diretamente para um <input />, permitindo customização.

Installation

$ yarn add react-simple-cep-mask

Example

Basic Example

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Cep from "react-simple-cep-mask";

const App = () => {
  const [cep, setCep] = useState("");
  return (
    <>
      <h2>Basic example</h2>
      <br />

      <Cep
        value={cep}
        onChange={ (cep) => setCep(cep) } 
      />

      <br />
      <h4>Masked value: {cep}</h4>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

With custom props

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Cep from "react-simple-cep-mask";

const App = () => {
  const [cep, setCep] = useState("");
  return (
    <>
      <h2>With custom props</h2>
      <br />

      <Cep
        value={cep}
        onChange={ (cep) => setCep(cep) }
        className="someClass"
        placeholder="Digite seu cep"
       />

      <br />
      <h4>Masked value: {cep}</h4>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

License

• MIT license
• Copyright 2015 © FVCproductions.