Menu
I've created several sections with the heading of the specific content.
I want to show a short sneak preview on hovering above the different section.
Does anyone knows how to create a hoverActionHandler with conditional rendering of a react component?
303
We do this by adding onMouseOver to the button element. After declaring that this element has an onMouseEnter event handler, we can choose what function we want to trigger when the cursor hovers over the element. We declare a function called changeBackground above the view part of the React Component.
To show and hide components and elements in React you will need to either use conditional rendering, css styles or animation libraries. For the most part conditional rendering will be done by checking if a value passes a condition, just like in an if statement but for react components and JSX.
The onMouseOver event in React occurs when the mouse pointer is moved onto an element (it can be a div, a button, an input, a textarea, etc). The event handler function will be fired and we can execute our logic there. The onMouseOut event in React occurs when the mouse pointer is moved out of an element.
You can use onMouseOver and onMouseOut to change the state and render a component conditionally based on the value of the state.
See it in action:
Hooks:
import React, { useState } from "react"; import { render } from "react-dom"; const HoverableDiv = ({ handleMouseOver, handleMouseOut }) => { return ( <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}> Hover Me </div> ); }; const HoverText = () => { return ( <div> Hovering right meow! <span role="img" aria-label="cat"> 🐱 </span> </div> ); }; const HoverExample = () => { const [isHovering, setIsHovering] = useState(false); const handleMouseOver = () => { setIsHovering(true); }; const handleMouseOut = () => { setIsHovering(false); }; return ( <div> {/* Hover over this div to hide/show <HoverText /> */} <HoverableDiv handleMouseOver={handleMouseOver} handleMouseOut={handleMouseOut} /> {isHovering && <HoverText />} </div> ); }; Class:
import React, { Component } from "react"; import { render } from "react-dom"; const HoverableDiv = React.memo(({ handleMouseOver, handleMouseOut }) => { return ( <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}> Hover Me </div> ); }); const HoverText = () => { return ( <div> Hovering right meow! <span role="img" aria-label="cat"> 🐱 </span> </div> ); }; class HoverExample extends Component { constructor(props) { super(props); this.handleMouseOver = this.handleMouseOver.bind(this); this.handleMouseOut = this.handleMouseOut.bind(this); this.state = { isHovering: false }; } handleMouseOver() { this.setState(() => ({ isHovering: true })); } handleMouseOut() { this.setState(() => ({ isHovering: false })); } render() { return ( <div> {/* <HoverText /> gets shown when mouse is over <HoverableDiv /> */} <HoverableDiv handleMouseOver={this.handleMouseOver} handleMouseOut={this.handleMouseOut} /> {this.state.isHovering && <HoverText />} </div> ); } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
