text

Simple React component including two buttons to increae and decrease font size

Aug 20, 2019
Simple React component including two buttons to increae and decrease font size

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.

View demo View Github

Install

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

Props

targets

Array of CSS query selectors for target elements

options

propertydetaildefault
stepSizeNumber of px to change for each action (up/down)2
rangeMax number of changes for both increment and decrement3

onChange

Handle font size change. Triggered each target element separately.

paramdetail
elementDOM element whose font size has changed
newValueNew font size for the element
oldValueOld font size for the element

customButtons

propertydetaildefault
upFont size increaser element
downFont size decreaser element
styleCustom style for each button
buttonsMarginMargin between buttons4px

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

GitHub

Recommended