# Introdução
O componente cp-counter permite escolher um tamanho máximo permitido no campo e também cria um contador que indica quantos dígitos faltam para alcançar o máximo permitido.
------
# Instalação
## CDN
Recomendamos vincular a um número de versão específico que você possa atualizar manualmente, porém no exemplo iremos utilizar a ultima versão disponível.
```html
```
Certifique-se de ler sobre as diferentes construções e use a produção, substituindo os arquivos .js por .min.js. Esta é uma compilação otimizada para velocidade em vez de experiência de desenvolvimento.
## NPM
O NPM é o método de instalação recomendado ao criar aplicativos de grande escala. Ele combina muito bem com bundlers de módulo, como Webpack ou Browserify.
```shell
$ npm install @uicapivara/cp-counter --save
```
Após a instalação, precisamos importar o componente no projeto.
Se seu projeto utiliza **typescript** você pode importar o componente normalmente.
```javascript
import '@uicapivara/cp-counter';
```
Caso contrário é necessário importa-los especificando o arquivo **js**. Exemplo:
```javascript
import '@uicapivara/cp-counter/index.js';
```
# Como usar
Se chegamos até aqui, provavelmente a instalação foi finalizada êxito, isso significa que já podemos utilizar o cp-counter.
Vamos agora criar uma nova instância do componente. Para isso basta colocarmos no HTML o nome do compoente e também uma `class` que possuirá as propriedades de configuração do componente.
```html
```
```javascript
class MyController {
constructor() {
this.myCounter = 'Example';
}
}
capivara.controller(document.body, MyController);
```
!> Lembre-se de que é necessário colocar o código `JavaScript` dentro de um elemento `
```