Skip to content

0.1.0
Compare
Choose a tag to compare
@lucasferreiralimax lucasferreiralimax released this 24 Aug 22:29
· 36 commits to main since this release
0.1.0
b0917e8

React VLibras Plugin v0.1.0 Release Notes

We are excited to announce the release of React VLibras Plugin version 0.1.0. This initial release of the library is designed to seamlessly integrate the VLibras accessibility widget into React applications.

Features

  • Automatic Script Loading: Dynamically loads the VLibras script and initializes the widget when the component mounts.
  • Keyframe Name Handling: Generates unique keyframe names to avoid conflicts with existing styles and updates keyframe references in stylesheets dynamically.
  • DOM Mutation Observer: Monitors DOM changes and updates stylesheets to ensure compatibility with dynamic content changes.

Installation

To get started with React VLibras Plugin, install the library via npm:

npm install react-vlibras-plugin

or with yarn:

yarn add react-vlibras-plugin

Usage

  1. Import the Component:

    Import the ReactVLibras component into your React application:

    import ReactVLibras from 'react-vlibras-plugin';

  2. Add to Your Component:

    Include the <ReactVLibras /> component in your application’s JSX:

    <ReactVLibras />

New Features and Enhancements

1. Enhanced Positioning Options

The position prop now supports additional options for better customization of the VLibras widget’s placement on the screen. The available values are:

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

These options allow you to place the VLibras widget exactly where you need it in your application.

2. Customizable Avatars

We’ve added the avatar prop, allowing you to choose from different avatars for the VLibras widget. The available options include:

  • icaro
  • hosana
  • guga
  • random (default)

You can now personalize the appearance of the widget by selecting the avatar that best suits your application’s design.

3. Adjustable Opacity

The opacity prop has been introduced to give you control over the transparency of the VLibras widget. The value should be a number between 0 and 1, with 1 being fully opaque (default). This feature allows you to adjust the widget's visibility to better match your application's style.

Example Usage

Here’s an example of how you can use the new properties to customize the VLibras widget:

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

This configuration will place the widget at the bottom-right corner of the screen, use the hosana avatar, and set the opacity to 0.9.

Assets 2
Loading