I have a rectangle div box on my page that contains various elements including a Font Awesome download icon. I want to display a specific text when the user hovers over the entire div, and then I want to change that text when the download button is hovered. I see the text change/show when the div is hovered, but don't see the text change when the download button is hovered. I added a console log in the download hover and that does show up. So I'm guessing the component is not re-rendering to display the updated text.
const [viewDownloadText, setViewDownloadText] = useState('');
...
return (
<div
className={'product d-flex'}
key={product.id}
onClick={() => openPDF(product.name)}
onMouseOver={() => setViewDownloadText('Click to view')}
onMouseOut={() => setViewDownloadText('')}
>
{viewDownloadText && (
<div className={'click-text'}>{viewDownloadText}</div>
)}
<FontAwesomeIcon
className={'SDS-download'}
icon={faFileDownload}
size={'2x'}
onMouseOver={() => {
console.log('download set!');
setViewDownloadText('Click to download');
}}
onMouseOut={() => {
setViewDownloadText('Click to view');
}}
/>
</div>
);
Related
So I'm trying to set up a mui-autocomplete component with additional buttons (Clear all (clear all values and close dropdown) + Apply (set value and close dropdown)) using ListboxComponent.
Issues:
when selecting options from the bottom of the list, the scroll position is reset to the top
cannot close the dropdown programmatically
Here is the ListboxComponent
ListboxComponent={(listBoxProps) => {
return (
<div>
<ul {...listBoxProps} />
<div>
<button
onMouseDown={(event) => {
// Disable blur
event.preventDefault();
}}
onClick={() => {
// clear values
setSelected([]);
}}
>
Clear All
</button>
<button
onMouseDown={(event) => {
// Disable blur
event.preventDefault();
}}
onClick={() => {
// apply value
}}
>
Apply
</button>
</div>
</div>
);
The options are rendered as follows:
renderOption={(optionProps, option, optionState) => {
return (
<li {...optionProps}>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
checked={optionState.selected}
/>
{option}
</li>
);
}}
So I'm using state to keep track of saving the selected values:
const [selectedResult, setSelected] = useState([]);
And when the option is selected - the state is updated
onChange={(event, selectedOptions) => {
setSelected(selectedOptions);
}}
But when the state changes, the component is re-rendered and the scroll is reset. It also seems that I can't use local variables to store the intermediate result, as the state won't update and the checkbox won't update.
StackBlitz link
Is there anything I can do to achieve this?
I wnat to add hover on every render row and when hover then download button will be show.
enter image description here
Do it with css like
.row-with-download:hover button {
display: block;
}
or like
const [isShown, setIsShown] = useState(false);
<Row onMouseEnter={() => setIsShown(true)}
onMouseLeave={() => setIsShown(false)}>
{isShown && <button/>}
I am using antd cards in my react project.
I want to show and hide extra content in my card with mouse hover on the card.
this is my card:
<Card
title="My Card Title"
extra={<Button type="link"> Download </Button>}
>
some content...
</Card>
I want to show Download button just when the mouse hover the card.
How can I control the visibility of extra section in antd card with mouseover?
First, You need an state for show/hide event:
const [show, setShow] = useState(false);
Second, you should make an mouse event function:
const mouseHover = () => setShow(prev => !prev)
And finally add this logic into your card with events like this:
<Card
title="My Card Title"
extra={show ? <Button type="link"> Download </Button> : null}
onMouseEnter={mouseHover}
onMouseLeave={mouseHover}
>
some content...
</Card>
I am able to use hover and click functionality separately in material ui Tooltip.
Now i want following functionality using both.
when i hover the tooltip should open. If i click the tooltip should remain open unless i close it.
I have done following to achive hover and onclick
1. initially disableHoverListener is false as a result am able to show tooltip on hover
2. when i click on the button to open the tool tip i set open = true. The tooltip remains open. If i try to close the tool tip am able to set the open = false. but the tooltip doesnot close until i move the mouse.
Can someone guide me in solving the problem
Here is the code for whatever I could understand from your description.
You want the tooltip to show on hover (default behaviour). But if you make it controlled component. i.e you want to set open true on click and false otherwise the default behaviour won't work.
Working Example: CodeSandbox
Here's code hope it helped.
const [show, setShow] = React.useState(false);
const handleClick = () => {
if (show) {
setShow(false);
} else {
setShow(true);
}
};
return (
<div
style={{ display: "inline" }}
onMouseOver={() => setShow(true)}
onMouseLeave={() => setShow(false)}
>
<Tooltip title="You want to see me!" open={show} onClick={handleClick}>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
</div>
);
I have a box which makes itself visible when a button is clicked. The box has a text field and a button. When that button is clicked, the box must hide again. But my problem is the box hides first and for a split second, i still can see the antd components.
box = () => {
<div style={{visibility: this.state.visibility}}>
<Input type= 'text' />
<Button onClick={() => {this.hideBox()}}>Send</Button>
</div>
}
showBox = () => {
this.setState({visibility: 'visible'});
}
hideBox = () => {
this.setState({visibility: 'hidden'});
}
render(){
return(
<div>
<Button onClick={() => {this.showBox()}}>Show</Button>
{this.box()}
</div>
)
}
I don't know how to make them hide at the same time.
Thank you for the help.
style={{display: `${this.state.visibility ? 'block' : 'none'}`}}
because antd components has it's default style: transition:"all 0.3s".
styles in devtool
if you hide it with style, I suggest using dispaly:block/none,instead of visibility.