React VLibras Plugin

Enhance Accessibility with React VLibras Plugin

React VLibras Plugin is a powerful tool designed to improve accessibility in your React applications. By integrating the VLibras widget, you can offer automatic translation of your content to Libras, making it more inclusive for users with hearing impairments.

👉 Get started now: React VLibras Plugin on npm

👉 For more information, visit: React VLibras Demo

Why Choose React VLibras Plugin?

Our library simplifies the process of adding accessibility features to your application. With just a few steps, you can implement the VLibras widget and provide a richer experience for users who rely on Libras.

About the Project

React VLibras Plugin is a social initiative aimed at increasing digital accessibility. This library empowers developers to make their applications more inclusive by seamlessly integrating the VLibras accessibility widget. The VLibras Widget is an accessibility resource developed to make web pages accessible for the deaf community. With automatic translation from Brazilian Portuguese to Brazilian Sign Language (LIBRAS), this tool allows deaf users to consume text content on any website.

Installation

To install the React VLibras Plugin, use npm:

npm install react-vlibras-plugin

Or with yarn:

yarn add react-vlibras-plugin

Usage

Follow these steps to integrate the VLibras widget into your React application:

  1. Import the ReactVLibras Component

    In your component file, import the ReactVLibras component:

    import ReactVLibras from 'react-vlibras-plugin';

  2. Add the Component to Your JSX

    Insert the component into your JSX to activate the VLibras widget:

    <ReactVLibras />

Properties

The component accepts the following input properties:

  • position: Defines the position of the VLibras widget on the screen. Possible values are:

    • left (default)
    • right
    • top
    • bottom
    • bottomLeft
    • topLeft
    • bottomRight
    • topRight

    Example:

    <ReactVLibras position="right" />

  • avatar: Specifies the avatar used in the VLibras widget. Options include:

    • icaro
    • hosana
    • guga
    • random (default)

    Example:

    <ReactVLibras avatar="guga" />

  • opacity: Sets the opacity of the VLibras widget. The value should be a number between 0 and 1, with the default being 1.

    Example:

    <ReactVLibras opacity={0.8} />

Example

Here is an example of how to configure the VLibras widget with custom properties:

<ReactVLibras
  position="left"
  avatar="hosana"
  opacity={0.9} />

This configuration will position the widget in the left corner of the screen, use the “hosana” avatar, and set the opacity to 0.9.

Technologies Used

  • React
  • TypeScript
  • Vite
  • Firebase Tools
  • ESLint

Made with ❤️