react-eulexia v1.2.0

react-eulexia

Components library to allow UI customizations, giving the person the possibility to adjust the website according to their visual needs. The final goal is to provide accessibility, turning websites more inclusive for people with reading difficulties, such as dyslexia.

Demo

Or, check this example and it's source code!

Install

yarn add react-eulexia

or

npm install react-eulexia

Usage

import React from 'react'
import {
  EulexiaFab,
  ColorChangeAction,
  FontFamilyAction,
  FontSizeAction,
  RulerAction,
  TextToSpeechAction
} from 'react-eulexia'

function App () {
  return (
    <div>
      {/* Other page elements */}
      <EulexiaFab>
        <FontSizeAction />
        <FontFamilyAction />
        <ColorChangeAction />
        <RulerAction />
        <TextToSpeechAction />
      </EulexiaFab>
    </div>
  )
}

export default App

Features

Gives the user the possibility to:

• Change the page's text and background color
• Change the page's font family
• Change the page's font size
• Display a reading ruler
• Use text-to-speech to read the selected text

Components

The main component is called EulexiaFab. Inside it, we can pass some Action buttons, which can be used independently from each other, and each provide some unique features.

The configurations made by the user that is visting the website are stored on the localStorage, so that the setup can be kept through the pages the user visits within the website.

EulexiaFab

The main component. It is basically a wrapper of the Fab provided by react-tiny-fab, with some default configurations.

ColorChangeAction

This component lets the user modify the texts, links and background colors of the page. The color picker component is provided by react-colorful.

FontFamilyAction

This component lets the user modify the font family of the words on the page. The fonts are collected from Google Fonts. Today, the four fonts available on react-eulexia are 'Courier', 'Open Sans', 'Roboto' and 'Roboto Mono', all of them are either sans serif or monospaced, which are recommended for people with dyslexia.

FontSizeAction

This component lets the user modify the font size of the words on the page. The words are separated into two categories, Headers and Texts, each has a different slider to set the value.

RulerAction

This component lets the user display a reading ruler on the page, a useful tool for people with dyslexia. The ruler size can be modified through a slider, and there is also an inverted mode that can be activated.

TextToSpeechAction

This component lets the user use the text-to-speech feature to read a selected text. The Speech Synthesis API is used through react-speech-kit, so not all browsers are supported. If browser is not supported, a 'Browser not supported' label will be shown.

Dependencies

This components on this library depends on some other great libraries. They are the following:

• react-colorful
• react-dropdown
• react-range
• react-speech-kit
• react-tiny-fab
• react-toggle
• react-tooltip

License

Licensed under MIT.