10 examples of 'npm popperjs' in JavaScript

Every line of 'npm popperjs' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
132createPopper() {
133 let { placement } = this;
134 const center = placement === 'center' || (!placement.includes('start') && !placement.includes('end'));
135
136 if (['start', 'end'].indexOf(this.placement) >= 0) {
137 placement = `bottom-${this.placement}`;
138 }
139
140 if (['center'].indexOf(this.placement) >= 0) {
141 placement = 'bottom';
142 }
143
144 // Let Popper.js manage the arrow position when it's centered (default).
145 if (this.arrowElement && center) {
146 this.arrowElement.setAttribute('x-arrow', '');
147 }
148
149 this.popperElement.style.minWidth = `${this.getTriggerWidth()}px`;
150
151 this.popper = new Popper(this.triggerElement, this.popperElement, {
152 placement,
153 modifiers: {
154 flip: {
155 boundariesElement: 'viewport',
156 },
157 keepTogether: {
158 enabled: true,
159 },
160 preventOverflow: {
161 boundariesElement: 'viewport',
162 escapeWithReference: true,
163 },
164 },
165 });
166}
208createPopper: function createPopper() {
209 var _this = this;
210
211 this.$nextTick(function () {
212 if (_this.visibleArrow) {
213 _this.appendArrow(_this.popper);
214 }
215
216 if (_this.appendToBody && !_this.appendedToBody) {
217 _this.appendedToBody = true;
218 document.body.appendChild(_this.popper.parentElement);
219 }
220
221 if (_this.popperJS && _this.popperJS.destroy) {
222 _this.popperJS.destroy();
223 }
224
225 if (_this.boundariesSelector) {
226 var boundariesElement = document.querySelector(_this.boundariesSelector);
227
228 if (boundariesElement) {
229 _this.popperOptions.modifiers = Object.assign({}, _this.popperOptions.modifiers);
230 _this.popperOptions.modifiers.preventOverflow = Object.assign({}, _this.popperOptions.modifiers.preventOverflow);
231 _this.popperOptions.modifiers.preventOverflow.boundariesElement = boundariesElement;
232 }
233 }
234
235 _this.popperOptions.onCreate = function () {
236 _this.$emit('created', _this);
237
238 _this.$nextTick(_this.updatePopper);
239 };
240
241 _this.popperJS = new Popper(_this.referenceElm, _this.popper, _this.popperOptions);
242 });
243},
4export default function usePopper(
5 containerRef,
6 elementRef,
7 { placement = 'auto' } = {},
8) {
9 useEffect(() => {
10 const container = containerRef.current
11 const element = elementRef.current
12 if (!container || !element) return undefined
13 const popper = new PopperJs(container, element, {
14 placement,
15 })
16 return () => popper.destroy()
17 }, [containerRef, elementRef, placement])
18}
146export function PopperReactMixin(getPopperRootDom, getRefDom, config) {
147 require_condition(typeof getPopperRootDom === 'function', '`getPopperRootDom` func is required!');
148 require_condition(typeof getRefDom === 'function', '`getRefDom` func is required!');
149
150 PopperMixin.call(this, config);
151 Object.keys(mixinPrototype).forEach(k=>this[k]=mixinPrototype[k]);
152 PopperReactMixinMethods.hookReactLifeCycle.call(this, getPopperRootDom, getRefDom);
153
154 return this;
155}
129updatePopper: function updatePopper() {
130 var popperJS = this.popperJS;
131 if (popperJS) {
132 popperJS.update();
133 if (popperJS._popper) {
134 popperJS._popper.style.zIndex = _popup.PopupManager.nextZIndex();
135 }
136 } else {
137 this.createPopper();
138 }
139},
417value: function _getPopperConfig() {
418 var popperConfig = {
419 placement: this._getPlacement(),
420 modifiers: {
421 offset: this._getOffset(),
422 flip: {
423 enabled: this._config.flip
424 },
425 preventOverflow: {
426 boundariesElement: this._config.boundary
427 }
428 } // Disable Popper.js if we have a static display
429
430 };
431
432 if (this._config.display === 'static') {
433 popperConfig.modifiers.applyStyle = {
434 enabled: false
435 };
436 }
437
438 return popperConfig;
439}
19function popper() {
20 return src('./node_modules/popper.js/dist/umd/popper.min.js').pipe(
21 dest('./static/popperjs/umd'))
22}
67_configurePopper(dropdownButtonElement, dropdownMenuElement) {
68
69 const dropdDownMenuPlacement = dropdownMenuElement.getAttribute('x-placement');
70 const referenceElement = this._findReferenceElement(dropdownButtonElement);
71
72 const config = this._createPopperConfig(dropdDownMenuPlacement);
73 this._popper = new Popper(referenceElement, dropdownMenuElement, config);
74}
15function SimplePopper() {
16 const classes = useStyles();
17 const [anchorEl, setAnchorEl] = React.useState(null);
18
19 function handleClick(event) {
20 setAnchorEl(anchorEl ? null : event.currentTarget);
21 }
22
23 const open = Boolean(anchorEl);
24 const id = open ? 'simple-popper' : null;
25
26 return (
27 <div>
28
29 Toggle Popper
30
31
32 {({ TransitionProps }) =&gt; (
33
34
35 The content of the Popper.
36
37
38 )}
39
40 </div>
41 );
42}
1626Dropdown.prototype._getPopperConfig = function _getPopperConfig() {
1627 var popperConfig = {
1628 placement: this._getPlacement(),
1629 modifiers: {
1630 offset: {
1631 offset: this._config.offset
1632 },
1633 flip: {
1634 enabled: this._config.flip
1635 }
1636 }
1637
1638 // Disable Popper.js for Dropdown in Navbar
1639 };if (this._inNavbar) {
1640 popperConfig.modifiers.applyStyle = {
1641 enabled: !this._inNavbar
1642 };
1643 }
1644 return popperConfig;
1645};

Related snippets