{"id":28273493,"url":"https://github.com/maumuller/valisk","last_synced_at":"2026-04-18T02:32:53.936Z","repository":{"id":65174167,"uuid":"577563406","full_name":"MauMuller/valisk","owner":"MauMuller","description":"👺 Máscaras para seus inputs de uma maneira fácil, rápida e performática.","archived":false,"fork":false,"pushed_at":"2023-03-02T13:57:38.000Z","size":1551,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-21T01:28:18.837Z","etag":null,"topics":["cep-mask","cnpj-mask","controlled-input","cpf-mask","hooks","javascript","libs-do-mau","mascara","mask","money-mask","password-mask","phone-mask","react","react-hook-form-integration","react-library","typescript","uncontrolled-input","valisk"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MauMuller.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-13T02:30:02.000Z","updated_at":"2023-03-02T13:26:11.000Z","dependencies_parsed_at":"2023-01-12T14:45:18.137Z","dependency_job_id":null,"html_url":"https://github.com/MauMuller/valisk","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/MauMuller/valisk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MauMuller%2Fvalisk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MauMuller%2Fvalisk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MauMuller%2Fvalisk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MauMuller%2Fvalisk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MauMuller","download_url":"https://codeload.github.com/MauMuller/valisk/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MauMuller%2Fvalisk/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260457222,"owners_count":23012260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cep-mask","cnpj-mask","controlled-input","cpf-mask","hooks","javascript","libs-do-mau","mascara","mask","money-mask","password-mask","phone-mask","react","react-hook-form-integration","react-library","typescript","uncontrolled-input","valisk"],"created_at":"2025-05-21T00:18:30.977Z","updated_at":"2026-04-18T02:32:53.897Z","avatar_url":"https://github.com/MauMuller.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003cimg align=\"left\" height=\"165px\" width=\"135px\" alt=\"Warpnet\" src=\"https://ik.imagekit.io/e6khzhxvx/Group_3Valisk.png?ik-sdk-version=javascript-1.4.3\u0026updatedAt=1672190456214\"/\u003e]()\n\n# Valisk\n\nÉ uma biblioteca feita para campos **UNCONTROLLED** e **CONTROLLED**, incluindo várias máscaras para serem utilizadas de uma maneira muito fácil e performática.\n\n\u003e EXTRA: Quando integrada ao `react-hook-form`, ela consegue trabalhar da melhor forma possivel, misturando as validações e controles dos campos, ás máscaras com personalização e sem renderizações desnecessárias.\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"GitHub package.json version\" src=\"https://img.shields.io/github/package-json/v/maumuller/valisk?color=%23ff1f3d\u0026label=version\u0026style=for-the-badge\" width=\"140\"\u003e\n\n  \u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/actions/workflow/status/maumuller/valisk/publish-package.yml?color=black\u0026style=for-the-badge\" width=\"150\"\u003e\n\n  \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/maumuller/valisk?color=%23ff1f3d\u0026style=for-the-badge\" width=\"120\"\u003e\n\n  \u003cimg alt=\"GitHub code size in bytes\" src=\"https://img.shields.io/github/languages/code-size/maumuller/valisk?color=black\u0026style=for-the-badge\" width=\"160\"\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[\u003cimg width=\"500\" src=\"https://ik.imagekit.io/e6khzhxvx/Principal.png?ik-sdk-version=javascript-1.4.3\u0026updatedAt=1676373284854\"/\u003e]()\n\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  Tipos de uso \u003cbr /\u003e\n `UNCONTROLLED` | `CONTROLLED` | `REACT-HOOK-FORMS`\u003cbr/\u003e\n\n  Linguagens \u003cbr /\u003e\n `JAVASCRIPT` | `TYPESCRIPT` \u003cbr/\u003e\n\n\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n## Introdução\n\nA ideia da construção da biblioteca já existia a muito tempo, porém, apenas depois de adquirir conhecimento das técnologias da modernidade que fui capaz de realiza-lá.\n\n**Valisk** trabalha com campos `CONTROLLED` e `UNCONTROLLED`, ou seja, te dando a possiblidade de controllar a renderização sem se precoupar com a `usabilidade do usuário`, essa `responsabilidade` é da `lib`.\n\nA biblitoeca disponibiliza _métodos_ e _tipos_, apenas o necessário para o desenvolvimento. Qualquer dúvida, basta navegar até a sessão -\u003e [API de Referência](#api-de-referência) e procurar pela questão em especial ou ainda, mandar uma issue.\n\nAgora segue abaixo o menu para um **roadmap** de refencia sobre a Lib:\n\n### Mapa da documentação\n\n- [Instalação](#instalação)\n\n  - [NPM](#npm)\n  - [YARN](#yarn)\n  - [PNPM](#pnpm)\n\n  \u003cbr /\u003e\n\n- [Casos de Uso](#casos-de-uso)\n\n  - [Uncontrolled](#uncontrolled)\n  - [Controlled](#controlled)\n  - [React Hook Form](#react-hook-form)\n  - [Outros Exemplos `novo`](#outros-exemplos-novo)\n\n  \u003cbr /\u003e\n\n- [V-Check | Checagem de Elemento `nova sessão`](#v-check--checagem-de-elemento-nova-sessão)\n\n  \u003cbr /\u003e\n\n- [API de Referência](#api-de-referência)\n\n  - [**useValisk**](#-usevalisk)\n\n    - Parâmetros\n\n      - [CPF](#cpf)\n      - [CNPJ](#cnpj)\n      - [CEP](#cep)\n      - [MONEY](#money)\n      - [PHONE](#phone)\n      - [PASSWORD](#password)\n\n    - Retornos\n      - [\\_masks](#_masks)\n      - [\\_forceUpdate](#_forceupdate)\n      - [\\_cleanValues](#_cleanvalues)\n      - [\\_getValues](#_getvalues)\n\n  \u003cbr /\u003e\n\n  - [**useConfigEntry `novo`**](#-useconfigentry-novo)\n\n  - [**ValiskProvider `novo`**](#-valiskprovider-novo)\n\n  - [**useValiskContext `novo`**](#-usevaliskcontext-novo)\n\n  \u003cbr /\u003e\n\n- [Erros Comuns `nova sessão`](#erros-comuns-nova-sessão)\n\n  - [Utilizei o_masks(...), porém a máscara não está sendo inserida.](#utilizei-o-masks-porem-a-mascara-nao-esta-sendo-inserida)\n\n  \u003cbr /\u003e\n\n- [Dúvidas](#dúvidas)\n\n  - [Dúvidas no uso da lib?](#duvidas-uso-da-lib)\n  - [Encontrou algum problema?](#encontrou-algum-problema)\n  - [Tem algumas ideias para contribuir?](#ideais-para-contribuir)\n  - [Ta afim de contribuir codando?](#contribuir-codando)\n\n\u003cbr /\u003e\n\n## Instalação\n\nPara sua utilização é necessário a instalação do pacote, para isso existem algumas possibilidades até o momento, entre elas:\n\n- ### NPM\n\n  **Link para a página oficial**\n  \u003chttps://www.npmjs.com/package/@libsdomau/valisk\u003e\n\n  \u003cbr/\u003e\n\n  ```shell\n    npm i @libsdomau/valisk\n  ```\n\n- ### Yarn\n\n  **Link para a página oficial**\n  \u003chttps://yarn.pm/@libsdomau/valisk\u003e\n\n  \u003cbr /\u003e\n\n  ```shell\n    yarn add @libsdomau/valisk\n  ```\n\n- ### PNPM\n\n  **Link para a página oficial**\n  \u003chttps://www.npmjs.com/package/@libsdomau/valisk\u003e\n\n  \u003cbr /\u003e\n\n  ```shell\n    pnpm add @libsdomau/valisk\n  ```\n\n\u003cbr /\u003e\n\n## Casos de uso\n\nAqui iremos entrar em alguns exemplos de uso, porém o foco é apenas a apresentação da lib com algumas ilustrações.\n\n**Obeservação:** Todos exemplos abaixos conterão `typescript`, caso queira utilizar com javascript, basta remover as tipagens.\n\n- #### Uncontrolled\n\n    \u003cdetails\u003e\n    \u003csummary id=\"utilização-simples\"\u003eIniciando com campos \u003cb\u003euncontrolled\u003c/b\u003e\u003c/summary\u003e\n\n  Nesse exemplo será utilizado uma demonstração apenas com o `_masks`, `_getValues`, com as propriedades `cpf` e `money`.\n\n  ```TSX\n  import { CSSProperties, FormEvent } from \"react\";\n  import { useValisk } from \"@libsdomau/valisk\";\n\n  const globalStyle: CSSProperties = {\n    display: \"flex\",\n    width: \"100%\",\n    height: \"100vh\",\n    margin: \"0\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    gap: \"1rem\",\n    color: \"#fff\",\n  };\n\n  let renderCounter = 0;\n\n  function App() {\n    console.log(`Renderizou ${++renderCounter}`);\n\n    interface Inputs {\n      campo1: string;\n      campo2: string;\n    }\n\n    const { _masks, _getValues } = useValisk\u003cInputs\u003e({\n      cpf: { name: \"campo1\" },\n      money: { name: \"campo2\", typeMoney: \"real\", explictMask: true },\n    });\n\n    const showValues = (data: Inputs) =\u003e {\n      evt.preventDefault();\n      console.log(data);\n    };\n\n    return (\n      \u003cform style={globalStyle} onSubmit={_getValues(showValues)}\u003e\n        \u003cinput type=\"text\" {..._masks(\"campo1\")} /\u003e\n        \u003cinput type=\"text\" {..._masks(\"campo2\")} /\u003e\n        \u003cbutton\u003eMostrar\u003c/button\u003e\n      \u003c/form\u003e\n    );\n  }\n\n  export default App;\n  ```\n\n  Output:\n\n  | 123.124.123-51 | 0,52 | Mostrar |\n  | :------------- | :--- | :------ |\n\n  \u003cbr /\u003e\n\n  Console:\n\n  ```SHELL\n    1 Renderização!\n    {campo1: '123.124.123-51', campo2: '0,52'}\n  ```\n\n  \u003c/details\u003e\n\n  \u003cdetails\u003e\n  \u003csummary id=\"utilização-simples\"\u003eUtilizando o _forceUpdate para mostrar valor do password\u003c/summary\u003e\n\n  Neste caso, iremos alterar o valor do campo para mostrar o valor normal apenas com o método `_forceUpdate` e um estado do button, fazendo assim alterar de escondido para o valor normal, tudo de forma uncontrolled.\n\n  ```TSX\n  import { CSSProperties, useEffect, useState } from \"react\";\n  import { useValisk } from \"@libsdomau/valisk\";\n\n  const globalStyle: CSSProperties = {\n    display: \"flex\",\n    width: \"100%\",\n    height: \"100vh\",\n    margin: \"0\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    gap: \"1rem\",\n    color: \"#fff\",\n  };\n\n  let renderCounter = 0;\n\n  function App() {\n    console.log(`${++renderCounter} Renderização`);\n    const [hideValue, setHideValue] = useState(true);\n\n    interface Inputs {\n      passwordInput: string;\n    }\n\n    const { _masks, _forceUpdate } = useValisk\u003cInputs\u003e({\n      password: { name: \"passwordInput\", hideValue: hideValue },\n    });\n\n    const textButton = hideValue ? \"Mostrar\" : \"Esconder\";\n\n    useEffect(() =\u003e {\n      _forceUpdate({ inputName: \"passwordInput\", inputType: \"uncontrolled\" });\n    }, [hideValue]);\n\n    return (\n      \u003cform style={globalStyle} onSubmit={(evt) =\u003e evt.preventDefault()}\u003e\n        \u003cinput type=\"text\" {..._masks(\"passwordInput\")} /\u003e\n        \u003cbutton onClick={() =\u003e setHideValue(!hideValue)}\u003e{textButton}\u003c/button\u003e\n      \u003c/form\u003e\n    );\n  }\n\n  export default App;\n\n  ```\n\n  Output:\n\n  | 123456789 | Esconder |\n  | :-------- | :------- |\n\n  \u003cbr /\u003e\n\n  Console:\n\n  ```SHELL\n    1 Renderização!\n    2 Renderização!\n  ```\n\n  \u003c/details\u003e\n\n\u003cbr/\u003e\n\n- #### Controlled\n\n  \u003cdetails\u003e\n  \u003csummary\u003eIniciando com campos \u003cb\u003econtrolled\u003c/b\u003e\u003c/summary\u003e\n\n  Aqui foi utilizado apenas o `_masks` e a propriedade `phone`, com renderização no campo para alterar a lista.\n\n  ```TSX\n  import { CSSProperties, useState } from \"react\";\n  import { useValisk } from \"@libsdomau/valisk\";\n\n  const globalStyle: CSSProperties = {\n    display: \"flex\",\n    width: \"100%\",\n    height: \"100vh\",\n    margin: \"0\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    gap: \"1rem\",\n    color: \"#fff\",\n  };\n\n  let renderCounter = 0;\n\n  function App() {\n    console.log(`${++renderCounter} Renderização!`);\n\n    interface Inputs {\n      phoneInput: string;\n    }\n\n    const randomNumbers = [...Array(10)].map(\n      () =\u003e `+${Math.round(Math.random() * 100000000)}`\n    );\n\n    const [data] = useState(randomNumbers);\n    const [phoneInput, setPhoneInput] = useState(\"\");\n\n    const filtredPhones = data.filter((number) =\u003e number.includes(phoneInput));\n\n    const { _masks } = useValisk\u003cInputs\u003e({\n      phone: { name: \"phoneInput\", typePhone: \"phoneMovel\", showDDD: true },\n    });\n\n    return (\n      \u003cdiv style={globalStyle}\u003e\n        \u003cform\u003e\n          \u003cinput\n            type=\"text\"\n            id=\"cnpj1\"\n            value={phoneInput}\n            onChange={(evt) =\u003e setPhoneInput(evt.target.value)}\n            {..._masks(\"phoneInput\")}\n          /\u003e\n        \u003c/form\u003e\n\n        \u003cul\u003e\n          {filtredPhones.map((numbers, indNumbers) =\u003e (\n            \u003cli key={indNumbers}\u003e{numbers}\u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  export default App;\n  ```\n\n  Output:\n\n  | +64 |\n  | :-- |\n\n  - +64044127\n  - +64203623\n\n  \u003cbr /\u003e\n\n  Console:\n\n  ```SHELL\n  1 Renderização!\n  2 Renderização!\n  3 Renderização!\n  ```\n\n  \u003c/details\u003e\n\n  \u003cdetails\u003e\n  \u003csummary\u003eUtilizando multiplos campos com o mesmo tipo de máscara\u003c/summary\u003e\n\n  Aqui foi utilizado o `_masks` e as propriedades `cep` e `cnpj`, possibilidando utilizar múltiplas vezes o mesmo tipo de valor.\n\n  ```TSX\n  import { CSSProperties, useState } from \"react\";\n  import { useValisk } from \"@libsdomau/valisk\";\n\n  const globalStyle: CSSProperties = {\n    display: \"flex\",\n    width: \"100%\",\n    height: \"100vh\",\n    margin: \"0\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    gap: \"1rem\",\n    color: \"#fff\",\n  };\n\n  let renderCounter = 0;\n\n  function App() {\n    console.log(`${++renderCounter} Renderização`);\n\n    interface Inputs {\n      cnpj1: string;\n      cnpj2: string;\n      cep1: string;\n      cep2: string;\n    }\n\n    const [inputs, setInputs] = useState([\n      { id: \"cnpj1\", value: \"\" },\n      { id: \"cnpj2\", value: \"\" },\n      { id: \"cep1\", value: \"\" },\n      { id: \"cep2\", value: \"\" },\n    ]);\n\n    const { _masks } = useValisk\u003cInputs\u003e({\n      cnpj: [{ name: \"cnpj1\", explictMask: true }, { name: \"cnpj2\" }],\n      cep: [{ name: \"cep1\", explictMask: true }, { name: \"cep2\" }],\n    });\n\n    const objectInput = (id: keyof Inputs) =\u003e inputs.find((obj) =\u003e obj.id === id);\n    const changeInputValue = (value: string, id: keyof Inputs) =\u003e {\n      setInputs((prev) =\u003e\n        prev.map((obj) =\u003e (obj.id === id ? { ...obj, value } : obj))\n      );\n    };\n\n    return (\n      \u003cform style={globalStyle}\u003e\n        \u003clabel htmlFor=\"cnpj1\"\u003ecnpj1\u003c/label\u003e\n        \u003cinput\n          type=\"text\"\n          id=\"cnpj1\"\n          value={objectInput(\"cnpj1\")?.value}\n          onChange={(evt) =\u003e changeInputValue(evt.target.value, \"cnpj1\")}\n          {..._masks(\"cnpj1\")}\n        /\u003e\n\n        \u003clabel htmlFor=\"cnpj1\"\u003ecnpj2\u003c/label\u003e\n        \u003cinput\n          type=\"text\"\n          id=\"cnpj2\"\n          value={objectInput(\"cnpj2\")?.value}\n          onChange={(evt) =\u003e changeInputValue(evt.target.value, \"cnpj2\")}\n          {..._masks(\"cnpj2\")}\n        /\u003e\n\n        \u003clabel htmlFor=\"cep1\"\u003ecep1\u003c/label\u003e\n        \u003cinput\n          type=\"text\"\n          id=\"cep1\"\n          value={objectInput(\"cep1\")?.value}\n          onChange={(evt) =\u003e changeInputValue(evt.target.value, \"cep1\")}\n          {..._masks(\"cep1\")}\n        /\u003e\n\n        \u003clabel htmlFor=\"cep1\"\u003ecep2\u003c/label\u003e\n        \u003cinput\n          type=\"text\"\n          id=\"cep2\"\n          value={objectInput(\"cep2\")?.value}\n          onChange={(evt) =\u003e changeInputValue(evt.target.value, \"cep2\")}\n          {..._masks(\"cep2\")}\n        /\u003e\n      \u003c/form\u003e\n    );\n  }\n\n  export default App;\n  ```\n\n  Output:\n\n  | cnpj1                    | cnpj2     | cep1         | cep2    |\n  | :----------------------- | :-------- | :----------- | :------ |\n  | 12.\\_\\_.\\_\\_/\\_\\_\\_-\\_\\_ | 12.341.23 | 67786-\\_\\_\\_ | 23334-5 |\n\n  \u003cbr /\u003e\n\n  Console:\n\n  ```SHELL\n    1 Renderização\n    2 Renderização\n    3 Renderização\n    ...\n    10 Renderização\n    12 Renderização\n    ...\n    22 Renderização\n  ```\n\n  \u003c/details\u003e\n\n\u003cbr /\u003e\n\n- #### React-Hook-Form\n\n  \u003cdetails\u003e\n  \u003csummary\u003eIntegração + Valores iniciais\u003c/summary\u003e\n\n  Nesse exemplo, iremos apenas integrar a lib com o `react-hook-form` colocando um valor inicial.\n\n  ```TSX\n  import { CSSProperties, useEffect } from \"react\";\n  import { useValisk } from \"@libsdomau/valisk\";\n  import { useForm } from \"react-hook-form\";\n\n  const globalStyle: CSSProperties = {\n    display: \"flex\",\n    width: \"100%\",\n    height: \"100vh\",\n    margin: \"0\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    gap: \"1rem\",\n    color: \"#fff\",\n  };\n\n  let renderCounter = 0;\n\n  function App() {\n    console.log(`${++renderCounter} Renderização`);\n\n    interface Inputs {\n      firstInput: string;\n      secondInput: string;\n    }\n\n    const { register, setValue } = useForm\u003cInputs\u003e({\n      defaultValues: { firstInput: \"123\", secondInput: \"456\" },\n    });\n\n    const { _masks, _forceUpdate } = useValisk\u003cInputs\u003e({\n      phone: [\n        {\n          name: \"firstInput\",\n          typePhone: \"phoneFixo\",\n          explictMask: true,\n          showDDD: true,\n        },\n        {\n          name: \"secondInput\",\n          typePhone: \"phoneMovel\",\n          showDDD: true,\n          showPrefix: true,\n        },\n      ],\n    });\n\n    useEffect(() =\u003e {\n      _forceUpdate([\n        {\n          inputName: \"firstInput\",\n          inputType: \"react_hook_form\",\n          dispatchSetValue: setValue,\n        },\n        {\n          inputName: \"secondInput\",\n          inputType: \"react_hook_form\",\n          dispatchSetValue: setValue,\n        },\n      ]);\n    }, []);\n\n    return (\n      \u003cform style={globalStyle} onSubmit={(evt) =\u003e evt.preventDefault()}\u003e\n        \u003cinput\n          type=\"text\"\n          {...register(\"firstInput\")}\n          {..._masks(\"firstInput\")}\n        /\u003e\n\n        \u003cinput\n          type=\"text\"\n          {...register(\"secondInput\")}\n          {..._masks(\"secondInput\")}\n        /\u003e\n      \u003c/form\u003e\n    );\n  }\n\n  export default App;\n  ```\n\n  Output:\n\n  | +12 3\\_\\_\\_-\\_\\_\\_\\_ | +45 6 |\n  | :------------------- | :---- |\n\n  \u003cbr /\u003e\n\n  Console:\n\n  ```SHELL\n  1 Renderização\n  ```\n\n  \u003c/details\u003e\n\n  \u003cdetails\u003e\n  \u003csummary\u003eUtilização do método _cleanVal e todas outras variações dos campos\u003c/summary\u003e\n\n  ```TSX\n  import { CSSProperties, useEffect, useState } from \"react\";\n  import { useValisk } from \"@libsdomau/valisk\";\n  import { useForm, SubmitHandler } from \"react-hook-form\";\n\n  const globalStyle: CSSProperties = {\n    display: \"flex\",\n    width: \"100%\",\n    height: \"100vh\",\n    margin: \"0\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    gap: \"1rem\",\n    color: \"#fff\",\n  };\n\n  const formStyle: CSSProperties = {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"1rem\",\n  };\n\n  let renderCounter = 0;\n\n  function App() {\n    console.log(`${++renderCounter} Renderização`);\n    const [hideValue, setHideValue] = useState(false);\n\n    interface Inputs {\n      firstInput: string;\n      secondInput: string;\n      thirtyInput: string;\n      fourtyInput: string;\n      fiftyInput: string;\n    }\n\n    const { register, setValue, handleSubmit } = useForm\u003cInputs\u003e({\n      defaultValues: { firstInput: \"123\", secondInput: \"456\" },\n    });\n\n    const { _masks, _forceUpdate, _cleanVal } = useValisk\u003cInputs\u003e({\n      phone: [\n        {\n          name: \"firstInput\",\n          typePhone: \"phoneFixo\",\n          explictMask: true,\n          showDDD: true,\n        },\n        {\n          name: \"secondInput\",\n          typePhone: \"phoneMovel\",\n          showDDD: true,\n          showPrefix: true,\n        },\n      ],\n      password: {\n        name: \"thirtyInput\",\n        hideValue: hideValue,\n      },\n      money: [\n        {\n          name: \"fourtyInput\",\n          typeMoney: \"real\",\n          explictMask: true,\n          explictSimbol: true,\n        },\n        {\n          name: \"fiftyInput\",\n          typeMoney: \"dollar\",\n          explictMask: true,\n          explictSimbol: false,\n        },\n      ],\n    });\n\n    const showValues: SubmitHandler\u003cInputs\u003e = (data) =\u003e {\n      console.log(data);\n      console.log(_cleanVal(data));\n    };\n\n    useEffect(() =\u003e {\n      _forceUpdate([\n        {\n          inputName: \"firstInput\",\n          inputType: \"react_hook_form\",\n          dispatchSetValue: setValue,\n        },\n        {\n          inputName: \"secondInput\",\n          inputType: \"react_hook_form\",\n          dispatchSetValue: setValue,\n        },\n        {\n          inputName: \"fourtyInput\",\n          inputType: \"react_hook_form\",\n          dispatchSetValue: setValue,\n        },\n        {\n          inputName: \"fiftyInput\",\n          inputType: \"react_hook_form\",\n          dispatchSetValue: setValue,\n        },\n      ]);\n    }, []);\n\n    useEffect(() =\u003e {\n      _forceUpdate({\n        inputName: \"thirtyInput\",\n        inputType: \"react_hook_form\",\n        dispatchSetValue: setValue,\n      });\n    }, [hideValue]);\n\n    return (\n      \u003cdiv style={globalStyle}\u003e\n        \u003cform onSubmit={handleSubmit(showValues)} style={formStyle}\u003e\n          \u003cinput\n            type=\"text\"\n            {...register(\"firstInput\")}\n            {..._masks(\"firstInput\")}\n          /\u003e\n\n          \u003cinput\n            type=\"text\"\n            {...register(\"secondInput\")}\n            {..._masks(\"secondInput\")}\n          /\u003e\n\n          \u003cinput\n            type=\"text\"\n            {...register(\"thirtyInput\")}\n            {..._masks(\"thirtyInput\")}\n          /\u003e\n\n          \u003cinput\n            type=\"text\"\n            {...register(\"fourtyInput\")}\n            {..._masks(\"fourtyInput\")}\n          /\u003e\n\n          \u003cinput\n            type=\"text\"\n            {...register(\"fiftyInput\")}\n            {..._masks(\"fiftyInput\")}\n          /\u003e\n\n          \u003cbutton\u003eMostrar Valores\u003c/button\u003e\n        \u003c/form\u003e\n\n        \u003cbutton onClick={() =\u003e setHideValue(!hideValue)}\u003e\n          {hideValue ? \"Mostrar\" : \"Ocultar\"} Senha\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  export default App;\n  ```\n\n  Output:\n\n  | +12 3323-444\\_ | +45 61 2 | •••••••••• | R$ 0,00 | 1,234.12 | Mostrar Valores | Mostrar Senha |\n  | :------------- | :------- | :--------- | :------ | :------- | :-------------- | ------------- |\n\n  \u003cbr /\u003e\n\n  Console:\n\n  ```SHELL\n  1 Renderização\n  2 Renderização\n\n  {\n    fiftyInput: \"1,234.12\",\n    firstInput: \"+12 3323-444_\",\n    fourtyInput: \"R$ 44,55\",\n    secondInput: \"+45 61 2\",\n    thirtyInput: \"1255555563\"\n  }\n\n  {\n    fiftyInput: \"123412\",\n    firstInput: \"123323444\",\n    fourtyInput: \"4455\",\n    secondInput: \"45612\",\n    thirtyInput: \"1255555563\"\n  }\n  ```\n\n  \u003c/details\u003e\n\n\u003cbr /\u003e\n\n- #### Outros Exemplos `novo`\n\n  \u003cdetails\u003e\n  \u003csummary\u003eMUI - Material UI\u003c/summary\u003e\n\n  Aqui será usado apenas o componente **TextField** do `Material UI`, porém o mesmo vale para todos outros.\n\n  \u003e OBS: Caso você tenha percebido, ao utilizar o componente do MUI, é necessário passar o **\\_masks** da seguinte forma:\n  \u003e\n  \u003e **InputProps: { inputsProps: { ...\\_masks(...) } }**\n  \u003e\n  \u003e Isso é necessário pois caso passe o \\_masks apenas para o primeiro **inputProps**, não acontecerá nada em tela, mas no console você verá a mensagem de erro da sessão abaixo.\n  \u003e\n  \u003e Mensagem de erro + V-check\n  \u003e\n  \u003e O motivo disso é devido a tipo de elemento na qual o masks está sendo colocado, nesse caso, seria uma **Div**, invés de um **Input**, por conta disso é necessário essa utilização redundante.\n\n  ```TSX\n  import { useEffect, useState, FC, ReactNode } from \"react\";\n  import { TextField, IconButton } from \"@mui/material\";\n  import { useValisk } from \"@libsdomau/valisk\";\n\n  const Form: FC\u003cReactNode\u003e = (children) =\u003e {\n    return \u003c\u003e{children}\u003c/\u003e\n  }\n\n  function App() {\n    const [hideValue, setHideValue] = useState(true);\n\n    type Inputs = {\n      campo1: string;\n    };\n\n    const methodsValisk = useValisk\u003cInputs\u003e({\n      password: { name: \"campo1\", hideValue },\n    });\n\n    console.log(\"1 Renderização\");\n\n    const { _masks, _cleanValues, _forceUpdate, _getValues } = methodsValisk;\n\n    useEffect(() =\u003e {\n      _forceUpdate({\n        inputName: \"campo1\",\n        inputType: \"uncontrolled\",\n      });\n    }, [hideValue]);\n\n    return (\n      \u003cdiv className=\"border border-red-600 h-screen items-center justify-center flex\"\u003e\n        \u003cForm\u003e\n          \u003cTextField\n            label=\"teste\"\n            defaultValue=\"bah\"\n            InputProps={{\n              inputProps: { ..._masks(\"campo1\") },\n              endAdornment: (\n                \u003cIconButton onClick={() =\u003e setHideValue(!hideValue)}\u003e O \u003c/IconButton\u003e\n              ),\n            }}\n          /\u003e\n        \u003c/Form\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  export default App;\n  ```\n\n  Output:\n\n  | \\*\\*\\* | O   |\n  | :----- | :-- |\n\n  \u003cbr /\u003e\n\n  Console:\n\n  ```SHELL\n  1 Renderização\n  ```\n\n  \u003c/details\u003e\n\n\u003cbr /\u003e\n\n## V-Check | Checagem de Elemento `nova sessão`\n\nAntes de partir para as referências, é importante entender do que se trata esse atributo.\n\n**\\_:\"v-check\"** é um atributo encontrado em todos os elementos que receberam o `_masks(\"...\")`, ele serve como uma **identificação** dentro do body da página.\n\nEle não possui nenhuma outra utilidade, apenas serve para mostrar quais elementos receberam o método mencionado acima.\n\nSua criação é justamente para previr qualquer tipo de inserção em algum elemento que não seja um campo de texto.\n\nEntão, caso a máscara não esteja funcionando do campo de texto em específico, recomendo que verifique se o **v-check** está incluido nesse input, caso não esteja, provavelmente seu componente possui algum elemento superior.\n\nMas não fique precoupado, será informado no **console caso o elemento que possui o `_masks(\"...\")` não seja um campo de texto**, por isso, fique de olho no console.\n\n![Error](./imgs_readme/error_message_lib.png)\n\n\u003cbr /\u003e\n\n## API de Referência\n\nNessa sessão você poderá tirar todas suas dúvidas quanto a parametros ou retornos dos métodos, assim como ententer os tipos e até mesmo verificar a sintaxe de utilização para variados casos de uso.\n\nAntes de continuar com a referência, lembre-se que é possível trabalhar de diversas formas com a lib, isso para atender aos mais variados casos de uso, porém, ela foi projetada para ser `integrada ao react-hook-form`, isso pois essa lib já resolve de forma muito eficiênte validações e controle sobre os campos, por isso, **valisk** realmente brilha com a sua utilização em conjunto.\n\nMesmo, a lib sendo incrivelmente poderosa com o react-hook-forms, ela pode ser utilizada sozinha da mesma forma, um exemplo disso é o método `_getValues`, na qual faz a mesma coisa que o onSubmit do `react-hook-form`, justamente para ser utilizado em conjunto com o `_cleanValues`, obtendo assim, todos os valores de forma limpa.\n\nPor baixo dos panos, a lib realiza de forma uncontrolled a colocação da mascára nos campos, utilizando evento padrões do Javascript e eficiêntes códigos para gerar as máscarás.\n\nAgora, vamos para os métodos.\n\n---\n\n## @ Types\n\nAqui você poderá encontrar a finalidade e retorno dos tipos, mas é importante saber que os nomes foram colocados de forma intuitiva para lembrarmos justamente disso.\n\n- ### Parâmetros\n\n  | Nomes                         | Valor do tipo                                                                                        |\n  | :---------------------------- | :--------------------------------------------------------------------------------------------------- |\n  | ValiskEntryType\\\u003cCampos\u003e      | `Array\u003c...\u003e \\| { cep: {...}, cpf: {...}, cnpj: {...}, password: {...}, money: {...}, phone: {...} }` |\n  | ConfigEntryType\\\u003cCampos\u003e      | `{ name: keyof Campos, props?: ListWithoutNameProp\u003cCampos\u003e }`                                        |\n  | ForceUpdateEntryType\\\u003cCampos\u003e | `Array\u003c...\u003e \\| { inputName: '...', inputType: \"controlled\", dispatchSetValue: function }`            |\n\n- ### Métodos\n\n  | Nomes                    | Valor do tipo                                                                                                    |\n  | :----------------------- | :--------------------------------------------------------------------------------------------------------------- |\n  | CleanValuesType\\\u003cCampos\u003e | `(props: Campos) =\u003e Campos`                                                                                      |\n  | ForceUpdateType\\\u003cCampos\u003e | `(props: ForceUpdateEntryType\u003cCampos\u003e) =\u003e void;`                                                                 |\n  | GetValuesType\\\u003cCampos\u003e   | `(func: (data: Campos) =\u003e void) =\u003e (evt: React.FormEvent\u003cHTMLFormElement\u003e) =\u003e React.FormEvent\u003cHTMLFormElement\u003e;` |\n  | MasksType\\\u003cCampos\u003e       | `(key: keyof Campos) =\u003e DetailsHTML;`                                                                            |\n\n\u003cbr/\u003e\n\n## @ useValisk\n\nHook que será utilizado para informar quais serão as máscaras e quais métodos de retorno serão necessários.\n\n- ### Entrada\n\n  ***\n\n  Caso você esteja utilizando `javascript`, pode ignorar essa parte, ela será apenas importante para `typescript`. Agora, caso seja este o caso, é importante enter a funcionalidade abaixo.\n\n  - ### useValisk\\\u003ccampos\u003e\n\n  Essa declaração é necessária para que o typescript possa utilizar os nomes dos campo de texto e assim, deixar de maneira explicita qual será o campo a possuir a máscara.\n\n  Sintaxe:\n\n  ```TSX\n  interface Inputs {\n    teste1: string;\n    teste2: string;\n  }\n\n  const { ... } = useValisk /* Aqui -\u003e */\u003cInputs\u003e(...)\n  ```\n\n  Assim como o `react-hook-form`, o **Valisk** também precisa desses de entrada, ou seja, é possivel utilizar essa mesma tipagem para ambas bibliotecas.\n\n  Após colocar como entrada do hook a tipagem dos campos, você já irá notar que todos os parâmetros e propriedades que precisam do nome do campo, irão retornar todos os campos, facilitando o processo de escolher qual nome do campo que precisa de tal máscara.\n\n  Sabendo disso, apenas informe sempre os tipos dos campos e deixe que o typescript e o valisk façam esse trabalho por você!\n\n\u003cbr/\u003e\n\n- ### Parâmetros\n\n  ***\n\n  Aqui estára todas as possibilidades de máscaras para serem inseridas, em breve terão mais outras para serem incluidas.\n\n  - ### CPF\n\n    - [x] Máscara Válida;\n    - [x] Possibilidade de personalização;\n    - [x] `CTRL-C / CTRL-V` com ou sem máscara;\n    - [x] Incremento mesmo com `Autocomplete dos navegadores`;\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eTemplate\u003c/b\u003e\u003c/a\u003e\u003c/summary\u003e\n\n    ```TS\n    //000.000.000-00\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useValisk } from \"@libsdomau/valisk\";\n\n      ...\n\n      const { _masks, _forceUpdate, _cleanVal, _getValues } = useValisk({\n        cpf: {\n          name: \"...\", //nome do campo\n          explictMask: false\n        },\n\n        // ou\n\n        cpf: [\n          {\n            name: \"...\",\n            explictMask: false\n          },\n          {\n            name: \"...\",\n            explictMask: false\n          }\n        ]\n      });\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003ePropriedades\u003c/b\u003e\u003c/summary\u003e\n      \u003cbr /\u003e\n\n    | Propriedades  | Tipos                 | Valores Padrões | Obrigatório | Descrição                                |\n    | :------------ | :-------------------- | :-------------- | :---------- | :--------------------------------------- |\n    | `name`        | Campos                | \"\"              | Sim         | Nome do campo                            |\n    | `explictMask` | boolean _/_ undefined | false           | Não         | Utilização da máscara de forma explicita |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n    \u003cbr /\u003e\n\n  - ### CNPJ\n\n    - [x] Máscara Válida;\n    - [x] Possibilidade de personalização;\n    - [x] `CTRL-C / CTRL-V` com ou sem máscara;\n    - [x] Incremento mesmo com `Autocomplete dos navegadores`;\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eTemplate\u003c/b\u003e\u003c/a\u003e\u003c/summary\u003e\n\n    ```TS\n    //00.000.000/0000-00\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useValisk } from \"@libsdomau/valisk\";\n\n      ...\n\n      const { _masks, _forceUpdate, _cleanVal, _getValues } = useValisk({\n        cnpj: {\n          name: \"...\", //nome do campo\n          explictMask: false\n        },\n\n        // ou\n\n        cnpj: [\n          {\n            name: \"...\",\n            explictMask: false\n          },\n          {\n            name: \"...\",\n            explictMask: false\n          }\n        ]\n      });\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003ePropriedades\u003c/b\u003e\u003c/summary\u003e\n      \u003cbr /\u003e\n\n    | Propriedades  | Tipos                 | Valores Padrões | Obrigatório | Descrição                                |\n    | :------------ | :-------------------- | :-------------- | :---------- | :--------------------------------------- |\n    | `name`        | Campos                | \"\"              | Sim         | Nome do campo                            |\n    | `explictMask` | boolean _/_ undefined | false           | Não         | Utilização da máscara de forma explicita |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n    \u003cbr /\u003e\n\n  - ### CEP\n\n    - [x] Máscara Válida;\n    - [x] Possibilidade de personalização;\n    - [x] `CTRL-C / CTRL-V` com ou sem máscara;\n    - [x] Incremento mesmo com `Autocomplete dos navegadores`;\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eTemplate\u003c/b\u003e\u003c/a\u003e\u003c/summary\u003e\n\n    ```TS\n    //00000-000\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useValisk } from \"@libsdomau/valisk\";\n\n      ...\n\n      const { _masks, _forceUpdate, _cleanVal, _getValues } = useValisk({\n        cep: {\n          name: \"...\", //nome do campo\n          explictMask: false\n        },\n\n        // ou\n\n        cep: [\n          {\n            name: \"...\",\n            explictMask: false\n          },\n          {\n            name: \"...\",\n            explictMask: false\n          }\n        ]\n      });\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003ePropriedades\u003c/b\u003e\u003c/summary\u003e\n      \u003cbr /\u003e\n\n    | Propriedades  | Tipos                 | Valores Padrões | Obrigatório | Descrição                                |\n    | :------------ | :-------------------- | :-------------- | :---------- | :--------------------------------------- |\n    | `name`        | Campos                | \"\"              | Sim         | Nome do campo                            |\n    | `explictMask` | boolean _/_ undefined | false           | Não         | Utilização da máscara de forma explicita |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n    \u003cbr /\u003e\n\n  - ### MONEY\n\n    - [x] Máscara Válida;\n    - [x] Possibilidade de personalização;\n    - [x] `CTRL-C / CTRL-V` com ou sem máscara;\n    - [x] Incremento mesmo com `Autocomplete dos navegadores`;\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eTemplate\u003c/b\u003e\u003c/a\u003e\u003c/summary\u003e\n\n    ```TS\n    //R$ 0,00 - Com Simbolo\n    //0,00\n\n    //US$ 0.00 - Com Simbolo\n    //0.00\n\n    //€ 0.00 - Com Simbolo\n    //0.00\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useValisk } from \"@libsdomau/valisk\";\n\n      ...\n\n      const { _masks, _forceUpdate, _cleanVal, _getValues } = useValisk({\n        money: {\n          name: \"...\", //nome do campo\n          typeMoney: \"real\",\n          explictMask: true,\n          explictSimbol: true,\n        },\n\n        // ou\n\n        cep: [\n          {\n            name: \"...\",\n            typeMoney: \"real\",\n            explictMask: true,\n            explictSimbol: true,\n          },\n          {\n            name: \"...\",\n            typeMoney: \"real\",\n            explictMask: true,\n            explictSimbol: true,\n          },\n        ]\n      });\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003ePropriedades\u003c/b\u003e\u003c/summary\u003e\n      \u003cbr /\u003e\n\n    | Propriedades    | Tipos                        | Valores Padrões | Obrigatório | Descrição                                            |\n    | :-------------- | :--------------------------- | :-------------- | :---------- | :--------------------------------------------------- |\n    | `name`          | Campos                       | \"\"              | Sim         | Nome do campo                                        |\n    | `typeMoney`     | \"real\" \\| \"dollar\" \\| \"euro\" | \"real\"          | Sim         | Tipo de moeda para máscara                           |\n    | `explictMask`   | boolean _/_ undefined        | false           | Não         | Utilização da máscara de forma explicita             |\n    | `explictSimbol` | boolean _/_ undefined        | false           | Não         | Mostra o simbolo da moeda escolhida ao lado esquerdo |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n    \u003cbr /\u003e\n\n  - ### PHONE\n\n    - [x] Máscara Válida;\n    - [x] Possibilidade de personalização;\n    - [x] `CTRL-C / CTRL-V` com ou sem máscara;\n    - [x] Incremento mesmo com `Autocomplete dos navegadores`;\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eTemplate\u003c/b\u003e\u003c/a\u003e\u003c/summary\u003e\n\n    ```TS\n    //Celular Completo\n    //+00 (00) 0 0000-0000\n\n    //Celular Com Prefixo\n    //(00) 0 0000-0000\n\n    //Celular Com DDD\n    //+00 0 0000-0000\n\n    //Celular\n    //0 0000-0000\n\n    //Telefone Completo\n    //+00 (00) 0000-0000\n\n    //Telefone Com Prefixo\n    //(00) 0000-0000\n\n    //Telefone Com DDD\n    //+00 0000-0000\n\n    //Telefone\n    //0000-0000\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useValisk } from \"@libsdomau/valisk\";\n\n      ...\n\n      const { _masks, _forceUpdate, _cleanVal, _getValues } = useValisk({\n        phone: {\n          name: \"...\", //nome do campo\n          typePhone: \"phoneMovel\",\n          explictMask: false,\n          showDDD: false,\n          showPrefix: false\n        },\n\n        // ou\n\n        phone: [\n          {\n            name: \"...\", //nome do campo\n            typePhone: \"phoneMovel\",\n            explictMask: false,\n            showDDD: false,\n            showPrefix: false\n          },\n          {\n            name: \"...\", //nome do campo\n            typePhone: \"phoneMovel\",\n            explictMask: false,\n            showDDD: false,\n            showPrefix: false\n          },\n        ]\n      });\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003ePropriedades\u003c/b\u003e\u003c/summary\u003e\n      \u003cbr /\u003e\n\n    | Propriedades  | Tipos                       | Valores Padrões | Obrigatório | Descrição                                 |\n    | :------------ | :-------------------------- | :-------------- | :---------- | :---------------------------------------- |\n    | `name`        | Campos                      | \"\"              | Sim         | Nome do campo                             |\n    | `typePhone`   | \"phoneMovel\" \\| \"phoneFixo\" | \"phoneMovel\"    | Sim         | Seleciona o tipo de fone que será o campo |\n    | `explictMask` | boolean _/_ undefined       | false           | Não         | Utilização da máscara de forma explicita  |\n    | `showDDD`     | boolean _/_ undefined       | false           | Não         | Fará o papel de mostrar ou esconder o DDD |\n    | `showPrefix`  | boolean _/_ undefined       | false           | Não         | Mostra ou esconde o Prefixo do campo      |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n    \u003cbr /\u003e\n\n  - ### PASSWORD\n\n    - [x] Máscara Válida;\n    - [x] Possibilidade de personalização;\n    - [x] `CTRL-C / CTRL-V` com ou sem máscara;\n    - [x] Incremento mesmo com `Autocomplete dos navegadores`;\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eTemplate\u003c/b\u003e\u003c/a\u003e\u003c/summary\u003e\n\n    ```TS\n    //••••••••••••\n    //ou\n    //123241231254\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useValisk } from \"@libsdomau/valisk\";\n\n      ...\n\n      const { _masks, _forceUpdate, _cleanVal, _getValues } = useValisk({\n        password: {\n          name: \"...\", //nome do campo\n          hideValue: true\n        },\n\n        // ou\n\n        password: [\n          {\n            name: \"...\", //nome do campo\n            hideValue: true\n          },\n          {\n            name: \"...\", //nome do campo\n            hideValue: true\n          },\n        ]\n      });\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003ePropriedades\u003c/b\u003e\u003c/summary\u003e\n      \u003cbr /\u003e\n\n    | Propriedades | Tipos                 | Valores Padrões | Obrigatório | Descrição                            |\n    | :----------- | :-------------------- | :-------------- | :---------- | :----------------------------------- |\n    | `name`       | Campos                | \"\"              | Sim         | Nome do campo                        |\n    | `hideValue`  | boolean _/_ undefined | true            | Não         | Opção de mostrar ou esconder o valor |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n\u003cbr /\u003e\n\n- ### Retornos\n\n  ***\n\n  Métodos que serão desestruturados para serem utilizados para diversas funcionalidades.\n\n  - ### \\_masks\n\n    - [x] Utilizado por todos campos;\n    - [x] Necessario ser usado de forma única em cada campo;\n    - [x] Não causa uma renderização por sua utilização`;\n    - [x] Insere de forma automática a tag name caso não o elemento não possua;\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSobre\u003c/b\u003e\u003c/summary\u003e\n\n    Este é sem sombra de dúvidas o método mais importante da biblioteca, sendo ele o responsavel por gerar a máscara para cada um dos campos, por isso é necessário utilizar do `operador rest` para funcionar as máscaras.\n\n    Além disso, assim como o `register` do `react-hook-form`, o `_masks` também precisa receber o nome do campo que irá receber a máscara configurada no hook.\n\n    Assim facilitando muito o aprendizado para quem já utilizava a outra biblioteca.\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useValisk } from \"@libsdomau/valisk\";\n\n      ...\n      interface Campos {\n        campo1: string;\n        campo2: string;\n      }\n\n\n      const { _masks } = useValisk\u003cCampos\u003e({...});\n\n      return (\n        \u003c\u003e\n          \u003cinput type=\"text\" {...masks(\"campo1\")}/\u003e\n        \u003c/\u003e\n      );\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eFuncionalidades\u003c/b\u003e\u003c/summary\u003e\n\n    | Opções      | Tipo            | Descrição                                                                        |\n    | :---------- | :-------------- | :------------------------------------------------------------------------------- |\n    | Propriedade | keyof \\\u003cCampos\u003e | Sendo preciso escolher somente um para cada \\_masks                              |\n    | Retorno     | DetailsHTML     | Propriedades do elemento Input, utilizando assim algumas tag do próprio elemento |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n  \u003cbr/\u003e\n\n  - ### \\_forceUpdate\n\n    - [x] Os campos que precisam desse efeito, precisam ser declaros de forma clara;\n    - [x] Pode ser usados quantas vezes forem necessárias com diversos campo em uma atualização ou apenas um;\n    - [x] Não causa uma renderização por sua utilização;\n    - [x] É usado na maioria da vezes em conjunto com o **useEffect** nativo do react.\n    - [x] Usado para trocar o valor da senha ou para carregar todas os campos com máscara como valor inicial.\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSobre\u003c/b\u003e\u003c/summary\u003e\n\n    Esse método possui a função de atualizar o valor de todos os campo inseridos, ele faz isso por meio de eventos e funcionalidades internas do campo, ou seja, `ele não causa nenhuma renderização`, para mudar o valor de forma defitiva é necessário carregar o componente novamente com as propriedades já alteradas, por conta disso, ele é normalmente utilizado com o `useEffect` do react, pois, assim que o componente é carregado novamente, ele captura todos os valores alterados e `realiza as mudaças` sem precisar realizar uma nova renderização.\n\n    Em seus parametros é necessário indicar algumas `props`, para que a lib possa fazer a atualização do campo `sem causar uma nova renderização`.\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useEffect } from \"react\";\n      import { useValisk } from \"@libsdomau/valisk\";\n      import { useForm } from \"react-hook-form\";\n      ...\n\n      interface Campos {\n        campo1: string;\n        campo2: string;\n      }\n\n      const [hideValue, setHideValue] = useState(false);\n      const { register, setValue } = useForm\u003cCampos\u003e();\n      const { _masks _forceUpdate } = useValisk\u003cCampos\u003e({...});\n\n      useEffect(() =\u003e {\n        _forceUpdate({\n          inputName: \"campo2\"\n          inputType: \"uncontrolled\"\n        })\n      }, []);\n\n      useEffect(() =\u003e {\n        _forceUpdate({\n          inputName: \"campo1\"\n          inputType: \"react-hook-form\",\n          dispatchSetValue: setValue,\n        })\n      }, [hideValue]);\n\n\n      return (\n        \u003c\u003e\n          \u003cinput type=\"text\" {...register(\"campo1\")} {...masks(\"campo1\")}/\u003e\n        \u003c/\u003e\n      );\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eFuncionalidades\u003c/b\u003e\u003c/summary\u003e\n\n    | Opções      | Tipo                                                                                                                       | Descrição                                                                                                                                                                                                                                                                           |\n    | :---------- | :------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n    | Propriedade | { inputName: keyof \\\u003cCampos\u003e, inputType: \"controlled\" \\| \"uncontrolled\" \\| \"react-hook-form\", dispatchSetValue: Function } | Aqui é preciso informar de forma exata os campos que serão atualizados, mesmo que não cause uma renderização, é importante colocar apenas aquele que necessitam de uma alguma atualização de valor. Lembrando que é possível inserir um array de objetos, além de apenas um objeto. |\n    | Retorno     | void                                                                                                                       | Esse método não retorna nenhum tipo de valor, apenas realiza seus processos.                                                                                                                                                                                                        |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n  \u003cbr/\u003e\n\n  - ### \\_cleanValues\n\n    - [x] Mostra todos os valores em forma de objeto da mesma maneira que foram declarados;\n    - [x] Necessita receber os dados e realiza a conversão deles para dados sem máscaras, apenas em formato de números e letras;\n    - [x] Todos valores que não foram configurados para possuirem máscara serão retornados sem alteração;\n    - [x] Pode ser usado com o `handleSubmit` do `react-hook-form` para mostrar tudo sem máscara.\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSobre\u003c/b\u003e\u003c/summary\u003e\n\n    Este é método que limpa o valor de todos as propriedades do objeto que possuem algum tipo de máscara e foram indicados nas configurações da lib, ele apenas remove tudo o que não seja letra ou número do valor.\n\n    Já os campos que não possuem a configuração, são retornados igualmente, porém, sem nenhum tipo de remoção.\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useValisk } from \"@libsdomau/valisk\";\n\n      ...\n\n      interface Campos {\n        campo1: string;\n      }\n\n      const showValues: Campos = (data) =\u003e {\n        console.log(_cleanVal(data));\n      };\n\n      const { _masks, _cleanValues, _getValues } = useValisk\u003cCampos\u003e({...});\n\n      return (\n        \u003cform onSubmit={_getValues(showValues)}\u003e\n          \u003cinput type=\"text\" {...masks(\"campo1\")}/\u003e\n        \u003c/form\u003e\n      );\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eFuncionalidades\u003c/b\u003e\u003c/summary\u003e\n\n    | Opções      | Tipo                  | Descrição                                                                                                                                                                                                  |\n    | :---------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n    | Propriedade | \\\u003cCampos\u003e             | Aqui é preciso informar a data obtida através do `onSubmit`, sendo pelo `_getValues` ou pelo `handleSubmit`                                                                                                |\n    | Retorno     | \\\u003cCampos\u003e (Formatado) | O retorno desse método é básicamente o mesmo objeto passado porém, com remoções de máscaras caso algum campo tenha sido registrado no hook, caso o contrário, apenas é retornado da maneira que é passado. |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n  \u003cbr/\u003e\n\n  - ### \\_getValues\n\n    - [x] Captura o valor de todos os campos dentro do form.\n    - [x] Os campos não precisam possuir o `_masks`, porém precisam estar declarados no [Tipo de Entrada](#entrada);\n    - [x] Ele retorna um objeto com todos o valores dos campos, essa tipagem é a mesma de entrada no hook;\n    - [x] Funciona igual o `handleSubmit` do `react-hook-form`, precisando passar um função dentro e ela possuirá os valores retornados.\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSobre\u003c/b\u003e\u003c/summary\u003e\n\n    Este método funciona como um auxiliar, uma função que captura todos valores dos campos que são **exclusivamente** filhos do Form. Após pegar os valores, ela converte eles em um objeto utilizando o nome do campo como **key** e o valor como **value**.\n\n    É necessário passar uma outra função para dentro desse método, ela que irá receber o valor dos campos em formato de objeto atráves do parâmetro.\n\n    Caso você tenha utilizado o `react-hook-form`, ela funciona igual o `handleSubmit`.\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    ```TSX\n      import { useValisk } from \"@libsdomau/valisk\";\n\n      ...\n\n      interface Campos {\n        campo1: string;\n      }\n\n\n      const { _masks, _getValues } = useValisk\u003cCampos\u003e({...});\n      const showValues: Campos = (data) =\u003e console.log(data);\n\n      return (\n        \u003cform onSubmit={_getValues(showValues)}\u003e\n          \u003cinput type=\"text\" {...masks(\"campo1\")}/\u003e\n        \u003c/form\u003e\n      );\n\n      \u003c!-- Ou --\u003e\n\n      return (\n        \u003cform onSubmit={_getValues((data) =\u003e console.log(data))}\u003e\n          \u003cinput type=\"text\" {...masks(\"campo1\")}/\u003e\n        \u003c/form\u003e\n      );\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eFuncionalidades\u003c/b\u003e\u003c/summary\u003e\n\n    | Opções      | Tipo                       | Descrição                                                                                                                                                |\n    | :---------- | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- |\n    | Propriedade | Função                     | Essa função será executada recebendo por parâmetro o objeto com todos os valores dos campos, ela precisa ser do tipo **void**, ou seja, **sem retorno**. |\n    | Retorno     | FormEvent\u003cHTMLFormElement\u003e | É retornado o evento para que seja possível capturar o evento do submit.                                                                                 |\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n\u003cbr/\u003e\n\n## @ useConfigEntry `novo`\n\nEste hook fará o trabalho pesado para você, caso precise organizar os dados dos campos de uma maneira diferente da forma que o `useValisk` pede, é só utilizar este hook, a finalidade dele é organizar, independente da estrutura as máscaras para os campo corretos.\n\n\u003e OBSERVAÇÃO: É necessário utilizar o tipo \u003cConfigEntryType\\\u003e no lugar onde será declarado a máscara e o nome do campo, porém é possivel criar todas outras estruturas ao redor da maneira que achar melhor.\n\n- ### Entrada\n\n  ***\n\n  Essa declaração é necessária para que o typescript possa utilizar os nomes dos campo de texto e assim, deixar de maneira explicita qual será o campo a possuir a máscara.\n\n  Sintaxe:\n\n  ```TSX\n  interface Inputs {\n    teste1: string;\n    teste2: string;\n  }\n\n  const { ... } = useConfigEntry /* Aqui -\u003e */\u003cInputs\u003e(...)\n  ```\n\n\u003cbr/\u003e\n\n- ### Parâmetros\n\n  ***\n\n  Aqui estára todas as possibilidades de máscaras para serem inseridas, em breve terão mais outras para serem incluidas.\n\n  - ### Any\n\n    - [x] Fará a conversão de uma estrutura de dados para outra;\n    - [x] Não altera nenhum dado;\n\n    \u003cdl\u003e\n      \u003cdt\u003eDefinições:\u003cdt\u003e\n      \u003cdd\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eObservações\u003c/b\u003e\u003c/a\u003e\u003c/summary\u003e\n\n    O principal motivo desse método receber any é porque ele literalmente aceita qualquer estutura de dados.\n\n    Desde um array com vários arrays dentro, até apenas um único objeto. Todas essa possibilidades fazem o método ser muito versatil.\n\n    Porém é **necessário a utilização** do tipo **ConfigEntryType** caso não crie o objeto diretamente no parâmetro.\n\n    Isso porque a ideia principal desse hook é converter a estrutura de dados que será utilizado como fonte para o hook `useValisk` para algo que o próprio possa aceitar, ou seja, você acaba tendo liberdade para criar vários tipos de estruturas, mas com a obrigação de incluir um objeto do tipo **ConfigEntryType**.\n\n      \u003c/details\u003e\n\n      \u003cdetails\u003e\n      \u003csummary\u003e\u003cb\u003eSintaxe\u003c/b\u003e\u003c/summary\u003e\n\n    Vamos ao exemplo da sua utilização, nela existe uma estrutura de uma array com um array e assim o nosso objeto que precisamos, assim declaramos e como podemos ver, a opção `props` não é obrigatória, isso funciona muito bem pois o valisk não irá gerar erro mesmo que não exista uma configuração de mascará para um nome de campo, ele apenas irá colocar o name no campo e não irá informar erro algum.\n\n    ```TSX\n      import { useValisk, useConfigEntry, ConfigEntryType } from \"@libsdomau/valisk\";\n\n      ...\n\n      interface Inputs {\n        campo1: string;\n        campo2: string;\n        campo3: string;\n      }\n\n      type Dados = Array\u003c\n        Array\u003cReact.HTMLAttributes\u003cHTMLInputElement\u003e \u0026 /* Aqui é usado --\u003e */ConfigEntryType\u003cInputs\u003e\u003e\n      \u003e;\n\n      const dados: Dados = [\n        [\n          {\n            name: \"campo1\",\n            id: \"campo1\",\n            defaultValue: \"aaaa\",\n            props: { money: { typeMoney: \"real\", explictMask: true }, cpf: { explictMask: true } /* \u003c-- Isso aqui não irá funcionar, ele pega apenas o primeiro  */ },\n          },\n          {\n            name: \"campo2\",\n            placeholder: \"teste1\",\n          },\n        ],\n        [\n          {\n            name: \"campo3\",\n            props: { cnpj: { explictMask: true } },\n          },\n        ],\n      ];\n\n      const configMasks = useConfigEntry\u003cInputs\u003e(dados);\n      const methodsValisk = useValisk\u003cInputs\u003e(configMasks);\n\n    ```\n\n      \u003c/details\u003e\n\n      \u003c/dd\u003e\n    \u003c/dl\u003e\n\n\u003cbr /\u003e\n\n- ### Retornos\n\n  ***\n\n  Métodos que serão desestruturados para serem utilizados para diversas funcionalidades.\n\n  - ### ValiskEntryType\n\n    O retorno do hook será sempre o parâmetro de entrada do `useValisk`, isso porque ele serve de auxiliar para uma estrutura diferente de dados.\n\n    Usando o mesmo exemplo anteriores teriamos a seguinte resposta:\n\n    ```TSX\n      const configMasks = useConfigEntry\u003cInputs\u003e(dados);\n      const methodsValisk = useValisk\u003cInputs\u003e(configMasks);\n\n      console.log(configMasks);\n\n      /*\n          cnpj:{\n              \"name\": \"campo3\",\n              \"explictMask\": true\n          },\n\n          money:{\n              \"name\": \"campo1\",\n              \"typeMoney\": \"real\",\n              \"explictMask\": true\n          }\n       */\n    ```\n\n\u003cbr/\u003e\n\n## @ ValiskProvider `novo`\n\nInspirado no `FormProvider` do `react-hook-form`, o **ValiskProvider** tem a funcionalidade de reutilização dos métodos do **useValisk**. É necessário apenas envolver esse componente entorno dos campos que precisam utilizar os métodos.\n\n- ### Parâmetros\n\n  ***\n\n  Ao utilizar o componente, é necessário passar um valor, esse é obtido através da utilização do método **useValisk**, assim, basta passar o valor retornado para dentro do componente pela destruturação.\n\n  \u003cbr/\u003e\n\n  - Sintaxe:\n\n    ```TSX\n    const methodsValisk = useValisk\u003cInputs\u003e(...);\n    const { _masks, _forceUpdate, _getValues, _cleanValues } = methodsValisk;\n\n    \u003cValiskProvider {...methodsValisk}\u003e\n      ...\n    \u003c/ValiskProvider\u003e\n    ```\n\n\u003cbr /\u003e\n\n## @ useValiskContext `novo`\n\n- ### Entrada\n\n  ***\n\n  Essa declaração é necessária para que o typescript possa utilizar os nomes dos campo de texto e assim, deixar de maneira explicita qual será o campo a possuir a máscara.\n\n  Sintaxe:\n\n  ```TSX\n  interface Inputs {\n    teste1: string;\n    teste2: string;\n  }\n\n  const { ... } = useValiskContext /* Aqui -\u003e */\u003cInputs\u003e()\n  ```\n\n\u003cbr/\u003e\n\n- ### Retornos\n\n  ***\n\n  Todos os métodos que são retornados serão a partir do valor do `ValiskProvider`, ou seja, serão os mesmo métodos do hook `useValisk`.\n\n  \u003cbr /\u003e\n\n  - Sintaxe:\n\n    ```TSX\n    ...\n\n    type Inputs = {\n      campo1: string;\n      campo2: string;\n      campo3: string;\n      campo4: string;\n    }\n\n    ...\n\n    return (\n      \u003cValiskProvider {...methodsValisk}\u003e\n        \u003cInputComponent /\u003e\n      \u003c/ValiskProvider\u003e\n    );\n\n\n    const InputComponent = () =\u003e {\n      const { _masks, _forceUpdate, _cleanValues, _getValues } = useValiskContext\u003cInputs\u003e();\n      return \u003cinput {..._masks('...')}/\u003e\n    }\n\n    ```\n\n\u003cbr/\u003e\n\n## Erros Comuns `nova sessão`\n\nEssa sessão foi criada para mostrar todos os erros comuns que podem acontecer com o uso da biblioteca, porém, **caso sua dúvida não esteja aqui, faça uma issue**, agradeço.\n\n  \u003cdetails\u003e\n    \u003csummary id=\"utilizei-o-masks-porem-a-mascara-nao-esta-sendo-inserida\"\u003eUtilizei o \u003ccode\u003e_masks(...)\u003c/code\u003e, porém a máscara não está sendo inserida.\u003c/summary\u003e\n\n  \u003cbr /\u003e\n\nExiste uma grande chance de, neste caso, o problema estar no elemento superior, isso acontece normalmente com componentes que possuem algum campo de texto.\n\nO problema aqui é que o elemento que está recebendo o método `_masks(...)` não é o campo de texto, mas sim algum outro elemento dentro do componente (caso seja um componente).\n\nPara identificar isso, basta procurar pelos elemento que possuem o atributo `v-check` dentro do inspecionar da página, caso algum elemento não seja um campo de texto, ele não funcionará.\n\nNesse caso, também haverá uma mensagem no console falando qual elemento está recebendo o método em específico.\n\n  \u003c/details\u003e\n\n\u003cbr /\u003e\n\n## Dúvidas\n\nAqui estão as melhores maneiras de contribuir com o projeto, caso tenha alguma coisa não explicada com as dúvidas abaixo, entre em contato.\n\n**Issue**:\n\u003chttps://github.com/MauMuller/valisk/issues/new\u003e\n\n**Pull Request**:\n\u003chttps://github.com/MauMuller/valisk/pulls\u003e\n\n\u003cdl\u003e\n  \u003cdd\u003e\n    \u003cdetails\u003e\n    \u003csummary id=\"duvidas-uso-da-lib\"\u003e\u003cb\u003eDúvidas no uso da lib?\u003c/b\u003e\u003c/summary\u003e\n      Opa, ta com dúvidas? Só fazer uma \u003ccode\u003eissue\u003c/code\u003e com o tema em específico, assim que der, eu respondo. \n    \u003c/details\u003e\n  \u003cdd\u003e\n\n  \u003cdd\u003e\n    \u003cdetails\u003e\n    \u003csummary id=\"encontrou-algum-problema\"\u003e\u003cb\u003eEncontrou algum problema?\u003c/b\u003e\u003c/summary\u003e\n      Opa, achou algum problema com a lib ou algo não está funcionando? Só fazer uma \u003ccode\u003eissue\u003c/code\u003e com o tema em específico, assim que der, eu respondo. \n    \u003c/details\u003e\n  \u003cdd\u003e\n\n  \u003cdd\u003e\n    \u003cdetails\u003e\n      \u003csummary id=\"ideais-para-contribuir\"\u003e\u003cb\u003eTem algumas ideias para contribuir?\u003c/b\u003e\u003c/summary\u003e\n      Cara que daora, bom, aqui tu tem duas opções:\n      \u003cbr/\u003e\n      \u003col\u003e\n        \u003cli\u003e\n            Tu pode fazer um \u003ccode\u003ePR\u003c/code\u003e para o código com essa ideia, com isso eu irei fazer um \u003ccode\u003ecode review\u003c/code\u003e para avaliar.\n        \u003c/li\u003e\n        \u003cli\u003e\n            Tu também pode criar uma \u003ccode\u003eIssue\u003c/code\u003e com a ideia, assim que der, a gente consegue trocar uma ideia.\n        \u003c/li\u003e\n      \u003c/ol\u003e\n    \u003c/details\u003e\n  \u003cdd\u003e\n\n  \u003cdd\u003e\n    \u003cdetails\u003e\n    \u003csummary id=\"contribuir-codando\"\u003e\u003cb\u003eTa afim de contribuir codando?\u003c/b\u003e\u003c/summary\u003e\n      Ta afim de ajudar a codar? da um \u003ccode\u003efork\u003c/code\u003e no projeto e manda uma \u003ccode\u003ePR\u003c/code\u003e.\n    \u003c/details\u003e\n  \u003cdd\u003e\n\u003c/dl\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaumuller%2Fvalisk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaumuller%2Fvalisk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaumuller%2Fvalisk/lists"}