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.


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



Array of CSS query selectors for target elements


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


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


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">
          targets={['#target .content']}
          onChange={(element, newValue, oldValue) => {
            console.log(element, newValue, oldValue);
            stepSize: 2,
            range: 3
            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>