How to cross out (Strikethrough) Text in React

avatar
Borislav Hadzhiev

Last updated: Jan 17, 2023
3 min

banner

# Table of Contents

  1. Cross out (Strikethrough) Text in React
  2. Cross out (Strikethrough) text on Click in React

# Cross out (Strikethrough) Text in React

Use the textDecoration property to strikethrough text in React.

The text-decoration CSS property sets the appearance of decorative lines on text.

App.js
const App = () => { return ( <div> <h2> <span style={{textDecoration: 'line-through'}}> bobby </span>{' '} hadz </h2> </div> ); }; export default App;

react strikethrough text

If you need to cross out an element on click, scroll down to the next subheading.

We used the text-decoration property to cross out text in React.

Notice that multi-word properties are camelCased when specified as inline styles.

The first set of curly braces in the inline style marks the beginning of an expression, and the second set of curly braces is the object containing styles and values.

App.js
<h2> <span style={{textDecoration: 'line-through'}}> bobby </span>{' '} hadz </h2>

When the textDecoration property of an element is set to line-through, it's text is crossed out.

If you need to do this often, extract the span element into a component that renders its children.

App.js
function StrikethroughText({children}) { return <span style={{textDecoration: 'line-through'}}>{children}</span>; } const App = () => { return ( <div> <h2> <StrikethroughText>Hello</StrikethroughText> world </h2> </div> ); }; export default App;

extract span element into component that renders its children

This code sample achieves the same result. Whatever we pass between the opening and closing tags of the StrikethroughText component will have its text crossed out.

If you also need to set the text color, click on the following link.

# Using a global CSS class to strikethrough text

An alternative solution is to define a strikethrough class in a global CSS file.

App.css
.strikethrough { text-decoration: line-through; }

And here is how we would import the App.css file and use the strikethrough class.

App.js
import './App.css'; const App = () => { return ( <div> <h2> <span className="strikethrough">Hello</span> world </h2> </div> ); }; export default App;

using global css class to strikethrough text

This approach enables us to reuse commonly used styles by defining them in a global CSS file.

It's a best practice to import your global CSS files in your index.js file because then they wouldn't only get loaded when a certain component is mounted.

# Cross out (Strikethrough) text on Click in React

To cross out text on click:

  1. Set the onClick prop on the element.
  2. When the element is clicked, check if its text-decoration property is set.
  3. If the property is set, remove it, otherwise set it to line-through.
App.js
const App = () => { const handleClick = event => { if (event.target.style.textDecoration) { event.target.style.removeProperty('text-decoration'); } else { event.target.style.setProperty('text-decoration', 'line-through'); } }; return ( <div> <p onClick={handleClick}>Walk the dog</p> <br /> <p onClick={handleClick}>Buy groceries</p> </div> ); }; export default App;

react strikethrough on click

We set the onClick on the paragraph elements, so every time they are clicked, the handleClick function is invoked.

The target property on the event object refers to the specific paragraph tag that was clicked.

We first check if the textDecoration property is set in the element's style object.

If the property is set, we use the removeProperty method to remove it.

If the textDecoration property is not set, we use the setProperty method to cross out the text.

This has the effect of toggling the strikethrough style on the paragraph tags.

You can set the onClick prop on as many elements as necessary and use the same handleClick function because it uses the event object to get a reference to the element that was clicked.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.