yarn
yarn add react-vlibras
npm
npm i react-vlibras
[!CAUTION] Para evitar re-renderizações da ferramenta ao alterar a rota, é extremamente importante implementar o componente no arquivo root fora do container da aplicação.
Next.js
// providers.tsx | providers.jsx
"use client";
import VLibras from "react-vlibras";
export default function Providers({ children }: { children: React.ReactNode }) {
return (
<>
<VLibras safeInit />
{children}
</>
);
}// layout.tsx | layout.jsx
import Providers from "./providers";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="pt-br">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}[!IMPORTANT] Caso queira testar a ferramenta no ambiente de desenvolvimento, é necessário desativar o modo estrito do React.
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
};
module.exports = nextConfig;React.js
// index.tsx | index.jsx
// Remova React.StrictMode
import VLibras from "react-vlibras";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<>
<VLibras />
<App />
</>
);Você pode definir configurações padrão da ferramenta, como posição na tela, avatar e opacidade de fundo através das propriedades.
| Atributo | Tipo | Descrição | Padrão |
|---|---|---|---|
| avatar |
icaro | hosana | guga | random
|
Avatar 3D | icaro |
| position |
right | left | top | bottom | top-left | top-right | bottom-left | bottom-right
|
Posição da ferramenta na tela | right |
| opacity | number |
Opacidade do background do avatar (0 ~ 1) | 1 |
| personalization | string |
Personalização do avatar (somente parceiros do projeto VLibras). | undefined |
| rootPath | string |
Link da pasta root da aplicação (entrar em contato para obter). Para otimizar a inicialização da ferramenta, você pode subi-la junto da sua aplicação e fornecer o path de acesso (isso impede receber atualizações). | https://vlibras.gov.br/app |
| safeInit | boolean |
Garante que a ferramenta seja iniciada somente após o carregamento completo do DOM (útil para frameworks como o Next.js que realizam renderização do lado do servidor). | false |