Is there a way I can adjust a <Popover> element when fullscreen (Element.requestFullscreen())?
By default its DOM is placed on the body root, and for so, it doesn't show when the element that triggered it to appear is fullscreen.
Because of this, all menus I have on my fullscreen element are never shown until it leaves fullscreen.
You have to customize container prop of the Popover
component. container is the node of DOM which is Popover mounted to. By default it is document.body. That is why Popover is mounted behind the element that is in full-screen mode.
You have to set container node to the element which is going to be in full-screen mode.
props container of the Popover component:
const containerRef = useRef(null);
<div ref={containerRef}>
<button onClick={handleOpen}>open</button>
<Popover container={containerRef.current}>
...
</Popover>
</div>
Related
I am using #tippyjs/react": "^4.2.6 & the problem is that react-tippy not being positioned properly on sidebar of our dashboard, whenever there is content more than screen height and is scrollable the tippy button is placed more above than it is supposed to.
For example, when there is very little content on the right and there is no scroll bar tippy tool is positioned properly as shown in the image below:
But whenever there is more content than the screen height on the right and scroll bar appears tippy tool seems to be positioned wrong (A bit above than the button) as shown in image:
I checked multiple ways to figure / fix this but wasn't able to
The code I'm using is this for the button tippy tool is this:
import React from "react";
import Tippy from "#tippyjs/react";
const TippyReload = props => {
return (
<Tippy
animation="fade"
theme="custom"
content="Refresh Count"
placement="top"
arrow={true}
className={`custom-tippy`}>
{/* Wrap this component over the refresh icon, so this will be the refresh icon */}
{props.children}
</Tippy>
);
};
export default TippyReload ;
I have an element that has a Popover.
My Popover components gets a ref and know how to position itself:
const ref = useRef();
<div ref={ref}>Element</div>
<Popover targetRef={ref} >Popover element </Popover>
Now, I want to add a second Popover that will open under the first one:
Which ref I need to give to the second Popover? How can I achieve this behavior?
How do i close a react bootstrap popover component in a react functional component? currently i am using a hack that closes the popover using the rootclose method and calling body.click on the button inside, however i feel this is not ideal, is there any way or method in the react bootstrap component or maybe by using refs with which i can achieve this?
**************following is how my component is structured right now *****
const setVisibility = (
<Popover id="popover-basic">
<Popover.Body className="px-0">
//code here
</Popover.Body>
</Popover>
);
const EditVisibility = () => (
<OverlayTrigger
trigger="click"
placement="bottom-end"
overlay={setVisibility}
rootClose
>
//code here
</OverlayTrigger>
);
and then I'm calling the EditVisibility component in the return method of my react functional component
Please look into the folling sandbox: https://codesandbox.io/s/close-popover-ytpze2
Introduce a show state to make the Popover controlled.
In Popover.Header you can define a closer button and set the show state to false on click
Write a callback function which toggle the Popover on button click ("onToggle" property of OverlayTrigger)
I am new to React.So i need to know how to hide or remove a component.
I have a Homepage where i have buttons like Logobutton and Menu button.I click on Menu button it loads a Menu component. I have done it by state. when i click on menu button I setState to true . It goes to Menu component. But when i click on Logo button It still shows the Menu component above the Home component. Logo button is from Header component.So i want to show Menu component only when clicking on menu button and hide or remove component when i move to some other page or click on any other button. How can i achieve it ?
You can conditionally render a component based on props:
<Component logged={value} />
//value will be the state value
if (logged) //state as prop {
return <UserGreeting />;
}
return <GuestGreeting />;
(from https://reactjs.org/docs/conditional-rendering.html)
or add style to a component and conditionally set the display property with ternary operator:
<Component logged={value} style={{display: logged ? 'block' : 'none'}}/>
I am happy I can use font-awesome in my projects. I want to put some bars as my open/close button for my menu. The icon itself is not clickable, but the small area between the icon and the border still activates the onClick. The console.log I put in my event handler shows that the icon does not pass the 'name' property needed to activate the state change. Does anyone know how to get around this?
I have tried wrapping it in span and i elements. The icon does show up, but is just not activating the onClick, probably because it is not passing the 'name' property.
My event handler:
menuClick(event) {
/*event.preventDefault();*/
const name = event.target.name;
console.log(name);
this.setState({[name]:!this.state[name]})
}
My button:
<button
name="menuOpen"
style={props.data.menuOpen ?
buttonStyle :
null}
onClick={props.menuClick}
className="menuOpenButton">
<FontAwesomeIcon name="menuOpen" icon="bars" size="3x" />
</button>
and the props are being passed to the child like this:
<Header
data={this.state}
menuClick={this.menuClick} />
Changing the event handler to look for the currentTarget fixed it.
const name = event.currentTarget.name