react-reading-panel 📖

Add accessibility reading panel to any website

Source Code | Live Demo

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)