
Vamos adicionar esse código HTML como exemplo:
```html
<input type="text" maxlength="9" onkeyup="handleZipCode(event)" />
```
<br />

E esse código em CSS:
```css
input {
  display: block;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 10px;
}
```
<br />

E a nossa <LinkStyled insideText='true' className="external">máscara</LinkStyled> em Javascript:
```js
const handleZipCode = (event) => {
  let input = event.target
  input.value = zipCodeMask(input.value)
}

const zipCodeMask = (value) => {
  if (!value) return ""
  value = value.replace(/\D/g,'')
  value = value.replace(/(\d{5})(\d)/,'$1-$2')
  return value
}
```
<br />

Resultado:
<Embed src='https://codepen.io/RamonCP/embed/NWbZwZw' />

Máscara de CEP para input em Javascript


Faremos uma função que receba o valor da moeda, o formato desejado e a localidade
e será retornado o valor formatado.

A nossa <LinkStyled insideText='true' className="external">máscara/função</LinkStyled> em Javascript ficará assim:
```js
const formatCurrency = (value, currency, localeString) => {
  const options = { style: "currency", currency }
  return value.toLocaleString(localeString, options)
}
```
<br />

E passando os parâmetros corretos teremos esse resultado para o Real:
```js
formatCurrency(1234.56, 'BRL', 'pt-BR')
//R$ 1.234,56
```
<br />

Podemos também usar essa máscara para outras moedas como o Dólar:
```js
formatCurrency(1234.56, 'USD', 'en-US')
//$1,234.56
```
<br />

Máscara de Moeda em Javascript


Vamos adicionar esse código HTML como exemplo:
```html
<input type="tel" maxlength="15" onkeyup="handlePhone(event)" />
```
Note que o input tem o <code>type="tel"</code>, esse <code>type</code> é indicado para 
telefones e o mais legal é que no mobile esse campo abre o teclado numérico.
<br />

E esse código em CSS:
```css
input {
  display: block;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 10px;
}
```
<br />

E a nossa <LinkStyled insideText='true' className="external">máscara</LinkStyled> em Javascript:
```js
const handlePhone = (event) => {
  let input = event.target
  input.value = phoneMask(input.value)
}

const phoneMask = (value) => {
  if (!value) return ""
  value = value.replace(/\D/g,'')
  value = value.replace(/(\d{2})(\d)/,"($1) $2")
  value = value.replace(/(\d)(\d{4})$/,"$1-$2")
  return value
}
```
Usamos <LinkStyled insideText='true' className="external"><code>regex</code></LinkStyled> 
dentro do <LinkStyled insideText='true' className="external"><code>.replace()</code></LinkStyled> 
para formatar o telefone e prevenir que o usuário digite algum 
carácter que não seja númerico.
<br />

Resultado:
<Embed src='https://codepen.io/RamonCP/embed/mdOgEWR' />

Máscara de telefone para input em Javascript


```js
const slugify = (str) => {
  const map = {
    '-' : ' ',
    '-' : '_',
    'a' : 'á|à|ã|â|ä|Ä|À|Á|Ã|Â',
    'e' : 'é|è|ê|ë|Ë|É|È|Ê',
    'i' : 'í|ì|î|ï|Ï|Í|Ì|Î',
    'o' : 'ó|ò|ô|õ|ö|Ö|Ó|Ò|Ô|Õ',
    'u' : 'ú|ù|û|ü|Ú|Ù|Û|Ü',
    'c' : 'ç|Ç',
    'n' : 'ñ|Ñ'
  };

  for (const pattern in map) {
    str = str.replace(new RegExp(map[pattern], 'g'), pattern);
  };

return str;
};

console.log(slugify("ã, ç, á, â, ä, ë, ï, ö, ü"))
// Resultado: a, c, a, a, a, e, i, o, u
```

Remover acentos com Javascript


```js
const numbers = [1,2,3,3,4,4,5,5,6,7]
const newNumbers = [...new Set(numbers)]

console.log(numbers)
console.log(newNumbers)

/*
    Resposta:
    array numbers: [ 1, 2, 3, 3, 4, 4, 5, 5, 6, 7 ]
    array newNumbers: [ 1, 2, 3, 4, 5, 6, 7 ]
*/
```


O objeto <code>Set()</code> apenas permite um array com valores únicos, então se passarmos um array com valores duplicados dentro dele eles serão removidos.

Nesse exemplo usei um array de números mas o mesmo vale para um array com strings.

```js
const names = ['João', 'Lucas', 'João', 'Paulo', 'Lucas']
const newNames = [...new Set(names)]

console.log(names)
console.log(newNames)

/*
    Resposta:
    array names: ['João', 'Lucas', 'João', 'Paulo', 'Lucas']
    array newNames: ['João', 'Lucas', 'Paulo']
*/
```

Remover valores duplicados em um array com Javascript


Dentro do diretório <code>/hooks</code> crie o <LinkStyled insideText='true' className="external"><code>useCopyToClipboard.js</code></LinkStyled> :
```js
import { useState, useEffect, useCallback } from "react";

const useCopyToClipboard = (resetCopiedInterval = 1500) => {
  const [isCopied, setIsCopied] = useState(false);
  
  const copyToClipboard = (text) => {
    const el = document.createElement("textarea");
    el.value = text;
    el.setAttribute("readonly", "");
    el.style.position = "absolute";
    el.style.left = "-99999px";
    document.body.appendChild(el);

    el.select();
    const success = document.execCommand("copy");
    document.body.removeChild(el);

    return success;
  };

  const handleCopy = useCallback((text) => {
    copyToClipboard(text);
    setIsCopied(true);
  }, []);

  useEffect(() => {
    let timeout;

    if (isCopied && resetCopiedInterval) {
      timeout = setTimeout(() => setIsCopied(false), resetCopiedInterval);
    }

    return () => {
      clearTimeout(timeout);
    };
  }, [isCopied, resetCopiedInterval]);

  return [isCopied, handleCopy];
};

export default useCopyToClipboard;
```
<br />

E importe o <LinkStyled insideText='true' className="external"><code>useCopyToClipboard.js</code></LinkStyled> dentro do App.js:
```jsx
import "./styles.css";

import useCopyToClipboard from "./hooks/useCopyToClipboard";

export default function App() {
  const [isCopied, handleCopy] = useCopyToClipboard();
  const text = "texto hello world...";

  return (
    <div className="App">
      <h4>Clique no botão para copiar o texto</h4>
      <p>{text}</p>
      <button onClick={() => handleCopy(text)}>Copiar texto</button>
      <p>{isCopied ? "Copiado!" : ""}</p>
    </div>
  );
}

```
<br />



Resultado:
<Embed src='https://codesandbox.io/embed/usecopytoclipboard-bgy3rh?fontsize=14&hidenavigation=1&theme=dark' />

Um custom hook para copiar textos em React

Snippets

Pequenos trechos de código que podem te ajudar.

Máscara de Moeda em Javascript

useCopyToClipboard

Máscara de CEP para input em Javascript

Máscara de telefone para input em Javascript

Remover acentos com Javascript

Remover valores duplicados em um array com Javascript