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) |