djpfs / react-vlibras Goto Github PK

View Code? Open in Web Editor NEW

29.0 2.0 6.0 630 KB

Lib do VLibras(https://vlibras.gov.br/) para usar em seus projetos React de forma rápida e fácil

JavaScript 69.22% TypeScript 30.78%

libras vlibras inclusao-digital acessibilidade

react-vlibras's Introduction

vlibras

Lib React que ajuda você a implementar o VLibras no seu site.

Esse componente segue os padrões fornecidos na documentação do vlibras.

Os surdos enfrentam bastante dificuldade para ler, escrever e se comunicar na língua oral do seu país. Dessa forma, para tentar reduzir esses problemas, o objetivo da ferramenta computacional de código aberto, denominada VLibras Widget, consiste em traduzir conteúdos do Português Brasileiro para a Língua Brasileira de Sinais (LIBRAS), tornando websites acessíveis a pessoas surdas. -- Visão geral vlibras

Instalação

npm install -S @djpfs/react-vlibras
# or
yarn add @djpfs/react-vlibras

Como usar

React (App.js)

NextJs (index.jsx)

Parametros

Você pode usar a propriedade forceOnload para forçar que o VLibras seja carregado a partir de decisões assíncronas, ja que por padrão ele é executado no evento onload.

import VLibras from './index'

function App() {
  return (
    <div className="App">
      <VLibras forceOnload={true} />
      <header className="App-header">
        <h1>Teste</h1>
      </header>
    </div>
  )
}

export default App

Confira melhor a motivação: gg-martins091/pull/9

Resultado

Contribuindo

De erros de digitação na documentação à codificação de novos recursos;
Verifique os issue em aberto ou abra um novo issue para iniciar uma discussão sobre sua ideia de recurso ou o bug que você encontrou;
Dê um fork no repositório, fazendo as alterações e enviando um PR;

Lib e README baseado no: @vue_a11y Template package: https://github.com/tomchen/example-typescript-package

Contribuidores

Made with contrib.rocks.

Obrigado ao gg-martins091 pela contribuição.

Obrigado por usar e fazer a web mais acessível

react-vlibras's People

Contributors

Stargazers

Watchers

Forkers

deboramsantos gg-martins091 fabioabreurethink moreiraste jamsantiago

react-vlibras's Issues

Module not found: Can't resolve '@djpfs/react-vlibras'

Estou tentando adicionar o react-vlibras em um projeto com NextJs e Javascript.

Quando vou importar o componente, após adicionado o pacote no projeto com Yarn, é retornado um
Module not found: Can't resolve '@djpfs/react-vlibras'

"dependencies": {
    "@djpfs/react-vlibras": "^1.0.5",
    "@popperjs/core": "^2.10.2",
    "bootstrap": "5.1.1",
    "next": "11.1.2",
    "prop-types": "^15.7.2",
    "react": "17.0.2",
    "react-bootstrap": "^2.0.0-rc.1",
    "react-dom": "17.0.2",
    "styled-components": "^5.3.3"
  },

Estou perdendo algo aqui?

VLibras fora do ar

Olá pessoal,

os domínios do VLibras estão fora do ar. Consequentemente, o plugin deixou de funcionar.
Estou criando essa issue para estimular a troca de informação sobre incidente.

Alguém sabe de alguma coisa?

Obs.: O plugin parou de funcionar por volta do dia 9 de dezembro de 2021

problema ao conectar com o servidor do VLibras

Olá, estou tendo esta resposta "Não foi possível estabelecer uma conexão com o serviço de tradução do VLibras" ao clicar em algum texto para traduzir. Não está tirando a funcionalidade, ou seja, traduz normalmente, mas deixa a experiência do usuário ruim...

aparece ao clicar e depois some:

Será que estou esquecendo de algo ou é um problema com o VLibras?

Error deploying to next js applications

create next-app --typescript

pkg.json

{
  "name": "testvlibras",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@djpfs/react-vlibras": "^2.0.2",
    "next": "12.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.6.5",
    "@types/react": "18.0.17",
    "@types/react-dom": "18.0.6",
    "eslint": "8.21.0",
    "eslint-config-next": "12.2.4",
    "typescript": "4.7.4"
  }
}

_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import VLibras from "@djpfs/react-vlibras";

function MyApp({ Component, pageProps }: AppProps) {
	return (
		<>
			<Component {...pageProps} />
			<VLibras forceOnload={true} />
		</>
	);
}

export default MyApp;