6 examples of 'popper js npm' in JavaScript

Every line of 'popper js npm' 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
this disclaimer
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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

19function popper() {
20 return src('./node_modules/popper.js/dist/umd/popper.min.js').pipe(
21 dest('./static/popperjs/umd'))
22}
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},
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}
29function getPopperChildren(wrapper) {
30 return new ShallowWrapper(
31 wrapper
32 .find(Popper)
33 .props()
34 .children({ popperProps: { style: {} }, restProps: {} }),
35 null,
36 );
37}
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},

Related snippets