Criando Uma Máscara Em Input ReactJS

Enquanto estamos desenvolvendo formulários em nossas aplicações, nos deparamos com campos comuns do tipo CEP, CPF, RG, telefone, etc.
Esses campos possuem uma formatação padrão entre eles, por exemplo, o CEP sabemos que o formato é algo assim:

xxxxx-xxx

Então, como podemos adicionar essa formatação automaticamente dentro do nosso sistema?
Para ser mais rápido, utilizaremos um cara chamado react-input-mask

Primeira coisa que devemos fazer é instalar essa dependência:

yarn add react-input-mask
npm i react-input-mask

Com ele instalado, utilizar é a coisa mais simples!
Basta importarmos e transformar algum input nosso para InputMask:

import React from "react";
import InputMask from "react-input-mask";

const Input = (props) => (
  <InputMask mask="99999-999" value={props.value} onChange={props.onChange} />
);

export default Input;

Pronto, com isso já temos um input de CEP!
O ‘9’ significa que ele aceitará qualquer valor, de 0 a 9!
Caso quisesse fazer um do tipo telefone, a propriedade mask ficaria: (xx) xxxx-xxxx

Rápido!