React Font Size Changer #

React Font Size Changer is a simple React component including two buttons to increae and decrease font size of a target text.

 


Live Demo

Install ##

npm install --save react-font-size-changer

Props ##

$3

Array of CSS query selectors for target elements

$3

| property | detail | default |
| ------------- |:------------------------------------------------------:| ------- |
| stepSize | Number of px to change for each action (up/down) | 2 |
| range | Max number of changes for both increment and decrement | 3 |

$3

Handle font size change. Triggered each target element separately.

| param | detail |
| ------------- |:------------------------------------------------------:|
| element | DOM element whose font size has changed |
| newValue | New font size for the element |
| oldValue | Old font size for the element |

$3

| property | detail | default |
| ------------- |:------------------------------------------------------:| ------- |
| up | Font size increaser element | |
| down | Font size decreaser element | |
| style | Custom style for each button | |
| buttonsMargin | Margin between buttons | 4px |

Example Usage ##

``JavaScript
import React, { Component } from 'react';
import FontSizeChanger from 'react-font-size-changer';

class App extends Component {
render() {
return (

targets={['#target .content']}
onChange={(element, newValue, oldValue) => {
console.log(element, newValue, oldValue);
}}
options={{
stepSize: 2,
range: 3
}}
customButtons={{
up: A,
down: A,
style: {
backgroundColor: 'red',
color: 'white',
WebkitBoxSizing: 'border-box',
WebkitBorderRadius: '5px',
width: '60px'
},
buttonsMargin: 10
}}
/>

This is the title of my target text

This is the content of my target text

);
}
}
``