Skip to content

nitzano/react-reading-panel

Repository files navigation

react-reading-panel 📖

Add accessibility reading panel to any website

Source Code | Live Demo

Demo

npm Commitizen friendly semantic-release License: MIT GitHub Repo stars npm

Main Features

  1. Change font size
  2. Change line spacing
  3. Change letter spacing
  4. Switch between light/dark colors

More features are coming soon!

Installation

npm install --save react-reading-panel

OR

yarn add react-reading-panel

Usage

Target by Id

<ReadingPanel targetId="sample"></ReadingPanel>
<p id="sample">
    Text to be changed
</p>

Target by class

<ReadingPanel targetClass="sample"></ReadingPanel>
<p className="sample">
    Text to be changed
</p>

Settings

Name Description Default
colorSetting light/dark default colors see below
defaultTheme default theme to start from light
direction panel direction horizontal
fontSizeStep font size step size 1
fontSizeUnits font size units px
letterSpacingDefaultSize letter spacing default size 1px
letterSpacingUnit letter spacing unit px
lineHeightDefaultSize line height default size 1rem
lineHeightsStep line height step size 1
lineHeightUnits line height units px
showButtons show only some of the buttons shows everything

Color Setting

Name Description Default
bgLightColor light background color #ffffff (white)
fgLightColor light foreground color #000000 (black)
fgDarkColor dark background color #ffffff (white)
bgDarkColor dark foreground color #000000 (black)