On Hover Effect Using React State
In this approach, we will use the React state to create a hover effect. When users hover over text, a state variable toggles, altering the inline style of the text. This manipulation triggers the “line-through” property, creating a strikethrough effect, effectively highlighting the interactive nature of the UI element.
Example: The provided React example showcases a component that creates a striking visual effect in the UI. When hovering over a paragraph, it toggles a strikethrough effect. This functionality leverages React’s state and event handling capabilities to monitor changes in the host state. Furthermore, the paragraph is styled with center alignment and a cursor pointer, ensuring an intuitive user experience.
App.js
Javascript
import React, { useState } from 'react';function App() { // State to track whether the paragraph is hovered const [isHovered, setIsHovered] = useState(false); // Event handler for hovering over the paragraph const handleHover = () => { setIsHovered(!isHovered); }; const paragraphStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '24px', color: '#333', cursor: 'pointer', }; const heading = { marginBottom: '16px', textAlign: 'center', color: 'green', }; // Style for the strikethrough effect const strikethroughStyle = { textDecoration: 'line-through', }; return ( <div> <h1 style={heading}>w3wiki</h1> <p onMouseEnter={handleHover} onMouseLeave={handleHover} style={paragraphStyle}> {isHovered ? ( <span style={strikethroughStyle}> Hover me to strikethrough </span> ) : ( 'Hover me to see the effect' )} </p> </div> );}export default App; |
Output:
How To Add Strikethrough On Text In ReactJs ?
Strikethrough text is a visual representation often used to denote changes or deleted content within an application. In this article, we will see various techniques to effectively add a strikethrough to Text using ReactJs. Strikethrough text, also referred to as crossed-out or deleted text serves as a formatting style employed to indicate obsolete or irrelevant content within ReactJS applications.