Questions tagged [react-popper]
46 questions
86
votes
10 answers
How to fix this error : " Module not found :can't resolve popper.js "
After import the Bootstrap and Jquery this error is showning when compiling.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
global.jQuery =…
Ranindu
- 1,013
- 1
- 7
- 13
11
votes
3 answers
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
When I place the command npm update for an existing React project, this is displayed:
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN optional SKIPPING…
zouhair zouita
- 145
- 2
- 2
- 7
8
votes
2 answers
react-popper incorrect position on mount
I have built a custom tree view in React, and each item contains a dropdown which is positioned using Popper. Since the child elements are not visible on render, Popper is not positioning the dropdown correctly, for example:
When the tree is open…
BenM
- 52,573
- 26
- 113
- 168
7
votes
1 answer
What am I missing when using react popper's usePopper() hook to generate an arrow?
I'm trying to follow the example on Popper.js's documentation on how to implement an arrow found here using their usePopper hook:
https://popper.js.org/react-popper/v2/
I tried putting this in a codebox and then console.log the styles.arrow and see…
Andrew Bautista
- 153
- 2
- 9
5
votes
1 answer
Are "popper" and "popper.js" two different packages in npm?
I am following a tutorial that uses this command to install popper:
npm install popper --save. But when I tried it got this error message: fatal error - cygheap base mismatch detected - 0x13A1410/0x13D1410
So I searched to find the github page of…
Hasani
- 3,543
- 14
- 65
- 125
4
votes
1 answer
MATERIAL-UI React - Popper of another Popper
I'm working on a calendar app.
The problem: clicking popper of a popper closes both poppers, because it fires the click outside event of the first popper which closes it.
I have a component
Itay Tur
- 683
- 1
- 15
- 40
4
votes
1 answer
React material - getting TypeError: Cannot set property 'transition' of undefined when testing popper component
I am using react material and the popper component in my project. I am trying to test component that uses popper with unit test.
This are the methods in the component:
constructor(props) {
super(props);
this.state = {
openMenu:…
Leff
- 1,968
- 24
- 97
- 201
4
votes
2 answers
How to use react-popper with render props
I am a beginner, trying to understand react-popper. On their github, this is the example code:
import { Manager, Reference, Popper } from 'react-popper';
const Example = () => (
{({ ref }) => (
R. Kohlisch
- 2,823
- 6
- 29
- 59
4
votes
1 answer
react-popper: re-position using scheduleUpdate
I'm using React-popper to show a date picker element after clicking a button.
JSX
{({ ref }) => (
)}
…
vsync
- 118,978
- 58
- 307
- 400
3
votes
0 answers
How to rotate tooltip arrow in react popper?
I have created tooltip using react-popper which uses portals. I have added modifiers with altAxis set to true to prevent overflow (see option.js file in below sandbox). Now in below sandbox tooltip is getting flipped but tooltip arrow should also…
aryat
- 83
- 8
2
votes
0 answers
How to force the popover to stay in the parent container with Popper.js
I'm trying to figure out how to make a popover with Popper.js to stay in the parent container of both the popover and the target when scrolling.
Here is an example: https://codesandbox.io/s/upbeat-hodgkin-ib2trf?file=/src/index.js
To reproduce the…
Ganbin
- 2,004
- 2
- 12
- 19
2
votes
0 answers
React-popper overflows viewport
I'm using react-popper with the following properties
usePopper = (refEle, popperEle, {
placement : 'auto',
modifiers : {
name: 'offset',
options: {
offset:[0, 10],
},
},
{
name:…
Zephyr
- 1,612
- 2
- 13
- 37
2
votes
1 answer
React Testing library testing error `NaN` is an invalid value for the `left` css style property
I am using internal library component that uses React popper. Component is a dropdown that should open when i click on a marked element, as any other dropdown menu should.
I am trying to test with React testing library flow where user opens dropdown…
Mario Petrovic
- 7,500
- 14
- 42
- 62
2
votes
0 answers
Trying to use event.stopPropagation() to separate mouse and touch events in React
I'm trying to create a top navigation menu using react-popper and react-router-dom.
Along the top navigation I have MenuItems, which, when hovered over, or tapped on a touch screen, expand with a popper component to show sub navigation items. You…
Alison Williams
- 21
- 2
2
votes
2 answers
React Popper. How to move element relatively parent?
I'm trying to move Popper that is inside parent component. How i can do it?
I tried to use offset property in modifiers object.
e.g.:
offset: {
offset: 20,
}
But offset only move Popper in one direction. If placement={'top' || 'bottom'} => it…
Andrey Osiyuk
- 338
- 6
- 14