How to Dynamically Change the Font Size in React

1. Dynamically Change the Font Size in React
2. Generate Dynamic Font Size in React Using the Ternary Operator

Flexibility and possibilities for customization are one of the best features of React. Developers can dynamically hide and display components and even apply (or not apply) certain styles or classes.

This article will show how to generate inline styles to change font size in React.

Dynamically Change the Font Size in React

There are a lot of ways to apply dynamic inline style values. You can have a variable containing a numeric value and set the font size to that number.

This variable can be passed down to your component as props, or you can create a state variable to store users’ input.

Let’s take a look at an example:

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [size, setSize] = useState(12);
  return (
    <div className="App">
      <label for="fontSize">Specify the font size</label>
      <br></br>
      <br></br>
      <input
        type="text"
        name="fontSize"
        onChange={(e) => setSize(e.target.value)}
      ></input>
      <p style={{ fontSize: `${size}px` }}>Text with dynamic font size</p>
    </div>
  );
}

You can see the live demo on CodeSandbox.

In this case, we used the useState() hook to define two variables: size, which will be the number of pixels for font size, and the setSize variable, which will contain a function used to update this value.

We initialized the value of the size variable to be 12.

Our JSX code contains an <input> element. We can set up an onChange event handler to listen for changes to the input field and use the setSize() function to update the state variable.

Finally, we set the inline style to specify the font size. Note that you must use double curly braces; one pair is necessary to evaluate a JavaScript expression and the other to denote an object.

We use template laterals to specify the value of the fontSize property. When the size state variable changes, the value of the fontSize CSS property will also change.

Generate Dynamic Font Size in React Using the Ternary Operator

There are many ways to generate font size in React dynamically. For instance, you can change the font size depending on whether a particular boolean value is true or false.

Let’s imagine you have an application where you want to display an error message. You might want to make the error message bigger.

In this case, you can set up a variable error, which is true if there is an error and false if there’s not. Then you can use a ternary operator to generate the fontSize value.

Let’s take a look at an example:

import "./styles.css";
export default function App() {
  const error = false
  return (
    <div className="App">
      <p style={{ fontSize: error ? "16px" : "12px" }}>Text with dynamic font size</p>
    </div>
  );
}

If there’s an error, the paragraph element will have a size of 16 pixels. If not, it will be 12.