📖
react-reading-panel
Main Features
- Change font size
- Change line spacing
- Change letter spacing
- 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) |