I am trying to stop some behaviour based on a condition if a mouse is hovering over a particular react component in my app.
I can only find old answers referencing jQuery and JS vanilla. Is there another way to do this? Or is it not acceptable?
Here is the component I interested in determining if the mouse is over:
<ContentRightHandSide offset={bannerHidden ? 80 : 120}>
<ContentTitle>
Activity
<img
style={{
display: "inline",
position: "relative",
marginLeft: "20px",
width: "35px",
}}
src={calendarIcon}
/>
</ContentTitle>
{authStatus === "authenticated" ? (
<ShareLogs
linkShareLogs={activeShareLogs}
isBannerHidden={bannerHidden}
hovered={hoveredNode}
selected={selectedNode}
/>
) : (
<div style={{ position: "relative" }}>
<img
src={blurredScreenLinks}
style={{
fontSize: "24px",
position: "relative",
margin: "0 auto",
width: "100%",
}}
/>
<button
style={{
backgroundColor: "#F7F1FF",
color: "#35373B",
position: "absolute",
fontFamily: "lato",
left: "0",
right: "0",
marginLeft: "auto",
marginRight: "auto",
width: "320px",
top: "100px",
padding: "0px 20px",
display: "flex",
alignItems: "center",
borderRadius: "60px",
}}
onClick={handleSignInClick}
>
<img
style={{
display: "inline",
position: "relative",
width: "80px",
cursor: "pointer",
margin: "-5px",
}}
src={slackIcon}
/>
<span style={{ textAlign: "left" }}>
Lorem Ipsum
</span>
</button>
</div>
)}
</ContentRightHandSide>
You can define hover events like this in React, similar to how you would handle onClick.
<Component
onMouseEnter={handleSomething}
onMouseLeave={handleSomething}
/>
There are a few ways you can determine if the mouse is currently over a React component, but how to "stop some behavior" depends on how your behavior runs.
If you can make your behavior dependent on some state variable, you can give the React component a handler that sets the state on onmouseenter and onmouseleave events:
const [isMouseOver, setIsMouseOver] = useState(false)
...
<ContentRightHandSide
onMouseEnter={() => setIsMouseOver(true)}
onMouseLeave={() => setIsMouseOver(false)}
offset={bannerHidden ? 80 : 120}
>
...
</ContentRightHandSide>
The handler you give to the component doesn't need to set a state variable either, it can perform whatever logic is needed to change your behavior.
This JSFiddle demonstrates that behavior in a class-based component.
The events you might be interested in: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
There is a section about handling events in the official React docs that might give you more ideas.
Related
I am using nextjs. I want use next/image for my background Image for a div. I saw several answers but everyone posting for full screen background image using next/image and not for a single div background image. I got this https://uharston.medium.com/next-js-image-optimization-on-background-images-65de18ea03f5. But its for full screen. I can use normal background Image but its not optimized like next/image.
Here's the Code i tried:
import Image from 'next/image'
export default function Home() {
const imgURL = "https://i.postimg.cc/kXb4L4hB/abstract-blur-empty-green-gradient-studio-well-use-as-backgroundwebsite-templateframebusiness-report.jpg"
return (
<div style={{ backgroundColor: "black", height: "100vh" }}>
<h1 style={{ color: "white", textAlign: "center" }}>Home Page </h1>
{/* Background Image */}
<div style={{ height: "500px", position: "relative" }}>
<Image
alt="main"
src={imgURL}
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
/>
</div>
{/* Content should come over image */}
<div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
<h3 style={{ color: "white" }}>Welcome Home</h3>
<h4 style={{ color: "white" }}>Tom</h4>
</div>
</div>
)
}
I need like this,
But I am getting this
I want the Welcome Home and Tom Text to be over the image. Please help me with some solutions.
You can set the image as background of the div like this :
<div style={{
height: "500px",
position: "relative",
backgroundImage: `url(${imgURL})`,
backgroundSize: "cover",
backgroundPosition: "center"
}}>
Or with next/Image :
<div style={{
height: "500px",
position: "relative"
}}>
<Image
alt="main"
src={imgURL}
fill
quality={100}
/>
<div style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
color: "white",
textAlign: "center"
}}>
<h3>Welcome Home</h3>
<h4>Tom</h4>
</div>
</div>
I'm using material ui icons, here i have camera icon which has another icon connected to it(AddIcon), i want to have icon for each letter in alphabet but material ui doesnt have it, so i found 'materialdesignicons' which has alphabets.
My question is how to replace that plus (addicon), for example with 'b' alphabet of 'materialdesignicons' ?
my code:
codesandbox: https://codesandbox.io/s/svgiconssize-demo-material-ui-forked-yfs77g?file=/index.tsx:73-134
code:
import * as React from "react";
import Box from "#mui/material/Box";
import Container from "#mui/material/Container";
import AddIcon from "#mui/icons-material/Add";
import CameraAltOutlinedIcon from "#mui/icons-material/CameraAltOutlined";
export default function SvgIconsSize() {
return (
<Container sx={{ background: "black", height: "100vh" }}>
<Box // This is your container
sx={{
position: "relative",
display: "initial",
color: "black", // camera icon takes the fill color from here
width: "50px",
height: "50px"
}}
>
<CameraAltOutlinedIcon sx={{ fontSize: 40, color: "white" }} />
<AddIcon // This acts like a frame for the plus icon for a good looking result
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
fontSize: 22,
strokeWidth: "4",
stroke: "white"
}}
/>
<AddIcon // This is plus icon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
color: "black", // plus icon takes the fill color from here
fontSize: 22
}}
/>
</Box>
{/* UNTIL HERE */}
</Container>
);
}
this is what i want to use: import { mdiAlphaB } from '#mdi/js';
so i checked tutorial : https://dev.materialdesignicons.com/getting-started/react
but i would just get rotating 'b'
it should look like this
but instead of plus, there should be 'b'
Any suggestions ?
You have to first install material design icons by running command
npm install #mdi/react #mdi/js
after that import like so
import Icon from '#mdi/react'
import { mdiAlphaB } from "#mdi/js"; // The icon to use
and then replace this
<AddIcon // This is plus icon
sx={{
position: "absolute",
right: "-6px",
bottom: "1px",
color: "black", // plus icon takes the fill color from here
fontSize: 22
}}
/>
with
<Icon //B icon
path={mdiAlphaB}
title="User Profile"
size={2}
color="white"
style={{
position: "absolute",
left: "15px",
top: "-10px"
}}
/>
)
and at the end tweak position property a bit if needed. And voila! you are done. link to codesandbox
I have a div like this in react js which renders multiple divs and overflows :
<div
style={{
display: "flex",
padding: "1em 0.7em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
But for some reason the padding is applied to the containers right side but not the left side here are some pictures :
How can I apply padding to the array item's container div for both the left and right sides ?
It's because your div width bigger then the body,
and as result your body also have scroll.
Try add boxSizing: border-box to your parent component, and the body scroll will disappear.
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e",
boxSizing: "border-box" // <--- this line
}}
>
...
</div>
);
};
It's the padding on the div. It's to little and the margin too.
import React from "react";
const App = () => {
return (
<div
style={{
display: "flex",
padding: "1em 0em",
overflowX: "auto",
width: "100%",
direction: "rtl",
background: "#ef394e"
}}
>
{Array.from(Array(10).keys()).map((each, index) => (
<div
key={index}
className="swiper-slide"
style={{
background: "white",
borderRadius: "10px",
width: "270px",
margin: "0 .4em"
}}
>
<div style={{ padding: "2em 6em" }}>Hello</div>
</div>
))}
</div>
);
};
export default App;
<Popover
key={element.name}
classes={{
paper: classes.paper
}}
open={open}
anchorEl={this.myRef.current}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left'
}}
BackdropProps={
{
classes: { root: classes.backdrop }
}
}
onExited={this.handlePopoverClose}
>
onExited callback doesn't work , onClose work well , pls help me find out why does it happens , is it issue on material ui , or in my code ?? I also have tried to use onMouseLeave and it is also doesn't work
paper: {
display: 'grid',
justifyContent: 'center',
backgroundColor: palette.common.black,
flexFlow: 'wrap',
width: 1128,
height: 432,
borderRadius: '0 0 8px 8px',
padding: '56px 40px 66px 40px',
overflow: 'hidden',
gridTemplateColumns: 'auto auto auto auto',
position: 'absolute',
zIndex: 20
},
backdrop: {
background: 'transparent',
zIndex: 20
},
Above you can find css styles which I assign for this Popover
The onExited event is fired when the Popover has successfully closed. In order to do this you need to first call a function that closes the Popover.
<Popover
key={element.name}
open={open}
anchorEl={this.myRef.current}
onClose={this.handlePopoverClose}
onExited={() => console.log("The Popup closed")}
>
...
</Popover>
I am trying to create an application using React-Native the page i am working on takes data it is given from a web server to populate a list. i am trying to display 20 entries, this includes an image and a name. i would like to create 20 views that contain this information in a scroll-able view. When i put a view inside of the scroll view it disappears. I am having trouble figuring out how scroll views work exactly, could someone please explain how this is done?
Code:
<View style={commonStyle.container}>
{/* Scrollable View */}
<ScrollView style={toysListStyle.MainContent}>
<View style={toysListStyle.ToyEntry}>
<Image resizeMode="contain" style={toysListStyle.ToyPicture}
source={{uri: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png'}}></Image>
<View style={toysListStyle.ToyNameView}>
<Text>Name</Text>
</View>
</View>
</ScrollView>
</View>
const toysListStyle = StyleSheet.create({
MainContent: {
position: "absolute",
left: "0%",
top: "33.5%",
width: "100%",
height: "60.5%",
backgroundColor: "rgba(0,0,0,0.05)",
flex: 1
},
ToyEntry: {
position: "absolute",
width: "100%",
height: "25%",
backgroundColor: "red",
flex: 1
},
ToyPicture: {
position: "absolute",
top: "5%",
left: "5%",
height: "90%",
width: "60%"
},
ToyNameView: {
position: "absolute",
top: "
right: "
height: "100%",
width: "
justifyContent: '
alignItems: 'center'
}
});
const commonStyle = StyleSheet.create({
container: {
position: "absolute",
bottom: 0,
left: 0,
height: windowHeight,
width: "100%",
backgroundColor: "white",
justifyContent: 'center',
alignItems: 'center',
},
I left out the information of the entire page because there is a lot but this is where i am having the problem. If i Change the ScrollView to a View then the View inside shows up, but in a ScrollView It doesn't appear. What am i missing?
You did all things right but...
ToyEntry: {
position: "absolute",
width: "100%",
height: "25%",// This will work if parent contain fixed height like device height or in points and it will divide those value in that ratio...
backgroundColor: "red",
flex: 1
}
So you can add fixed height to ToyEntry or you can add fixed height to
its parent...
I was able to view the content inside ScrollView with a bit change in ToyEntry style, just add height to absolute value instead of %
ToyEntry: {
position: "absolute",
width: "100%",
height: 250,
backgroundColor: "red",
flex: 1
}
Also, the image that you have shared, for some reason is not showing so I changed the image link also to see the result
<Image resizeMode="contain" style={styles.ToyPicture}
source={{uri: 'https://unsplash.it/400/400?image=1'}}
/>