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

targets

Array of CSS query selectors for target elements

options

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

onChange

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

customButtons

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

import React, { Component } from 'react';
import FontSizeChanger from 'react-font-size-changer';
 
class App extends Component {
  render() {
    return (
      <div className="app">
        <FontSizeChanger
          targets={['#target .content']}
          onChange={(element, newValue, oldValue) => {
            console.log(element, newValue, oldValue);
          }}
          options={{
            stepSize: 2,
            range: 3
          }}
          customButtons={{
            up: <span style={{'fontSize': '36px'}}>A</span>,
            down: <span style={{'fontSize': '20px'}}>A</span>,
            style: {
              backgroundColor: 'red',
              color: 'white',
              WebkitBoxSizing: 'border-box',
              WebkitBorderRadius: '5px',
              width: '60px'
            },
            buttonsMargin: 10
          }}          
        />
        <div id="target">
          <p className="title">This is the title of my target text</p>
          <p className="content">This is the content of my target text</p>
        </div>
      </div>
    );
  }
}