use-popper - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

README.md

+# Use Popper
+
+![npm](https://img.shields.io/npm/dt/use-popper.svg)
+![npm](https://img.shields.io/npm/v/use-popper.svg)
+![NpmLicense](https://img.shields.io/npm/l/use-popper.svg)

renovate.json

+{
+  "extends": ["config:base"],
+  "automerge": true,
+  "major": {
+    "automerge": false
+  }
+}

src/index.ts

+import Popper from 'popper.js';
+import React from 'react';
+import usePopperState from './usePopperState';
+
+export interface Options {
+  placement?: Popper.Placement;
+  positionFixed?: boolean;
+  eventsEnabled?: boolean;
+  modifiers?: Popper.Modifiers;
+}
+
+function usePopper({
+  placement = 'bottom',
+  positionFixed = false,
+  eventsEnabled = true,
+  modifiers = {},
+}: Options) {
+  const popperInstance = React.useRef<Popper>(null);
+  const [popperStyles, updatePopperState] = usePopperState(placement);
+  const [referrenceNode, referrenceRef] = React.useState<Element | null>(null);
+  const [popperNode, popperRef] = React.useState<Element | null>(null);
+  const [arrowNode, arrowRef] = React.useState<Element | null>(null);
+
+  React.useEffect(() => {
+    if (popperInstance.current !== null) {
+      popperInstance.current.destroy();
+    }
+
+    if (referrenceNode === null || popperNode === null) return;
+
+    // @ts-ignore
+    popperInstance.current = new Popper(referrenceNode, popperNode, {
+      placement,
+      positionFixed,
+      modifiers: {
+        ...modifiers,
+        arrow: {
+          ...(modifiers && modifiers.arrow),
+          enabled: Boolean(arrowNode),
+          element: arrowNode as Element,
+        },
+        applyStyle: { enabled: false },
+        updateStateModifier: {
+          enabled: true,
+          order: 900,
+          fn: updatePopperState,
+        },
+      },
+    });
+
+    return () => {
+      if (popperInstance.current !== null) {
+        popperInstance.current.destroy();
+      }
+    };
+  }, [
+    arrowNode,
+    referrenceNode,
+    popperNode,
+    placement,
+    positionFixed,
+    modifiers,
+  ]);
+
+  React.useEffect(() => {
+    if (!popperInstance.current) return;
+
+    if (eventsEnabled) {
+      popperInstance.current.enableEventListeners();
+    } else {
+      popperInstance.current.disableEventListeners();
+    }
+  }, [eventsEnabled, popperInstance.current]);
+
+  React.useEffect(() => {
+    if (popperInstance.current) {
+      popperInstance.current.scheduleUpdate();
+    }
+  });
+
+  return {
+    placement: popperStyles.placement,
+    referrence: {
+      ref: referrenceRef,
+    },
+    popper: {
+      ref: popperRef,
+      styles: popperStyles.popperStyles as React.CSSProperties,
+    },
+    arrow: {
+      ref: arrowRef,
+      styles: popperStyles.arrowStyles as React.CSSProperties,
+    },
+  };
+}
+
+export default usePopper;

src/usePopperState.ts

+import Popper from 'popper.js';
+import React from 'react';
+
+// @ts-ignore
+const popperStyles: Popper.Data['styles'] = {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  opacity: '0',
+  pointerEvents: 'none',
+};
+
+function usePopperState(
+  placement: Popper.Placement
+): [
+  {
+    placement: Popper.Placement;
+    popperStyles: CSSStyleDeclaration;
+    arrowStyles?: CSSStyleDeclaration;
+  },
+  (data: Popper.Data) => Popper.Data
+] {
+  const [currentPopperStyles, setPopperStyles] = React.useState(popperStyles);
+  const [currentArrowStyles, setArrowStyles] = React.useState<
+    Popper.Data['arrowStyles']
+  >();
+  const [currentPlacement, setPlacement] = React.useState<Popper.Placement>(
+    placement
+  );
+
+  const setState = React.useCallback((data: Popper.Data) => {
+    const { styles, arrowStyles, placement: p } = data;
+
+    setPopperStyles(styles);
+    setArrowStyles(arrowStyles);
+    setPlacement(p);
+
+    return data;
+  }, []);
+
+  const state = {
+    placement: currentPlacement,
+    popperStyles: currentPopperStyles,
+    arrowStyles: currentArrowStyles,
+  };
+
+  return [state, setState];
+}
+
+export default usePopperState;

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"]
+}

package.json

 {
   "name": "use-popper",
-  "version": "0.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "0.0.1",
+  "license": "MIT",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "tsc": "tsc --noEmit"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sandiiarov/use-popper.git"
+  "babel": {
+    "presets": [
+      "@babel/preset-typescript",
+      "@babel/preset-react"
+    ]
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/sandiiarov/use-popper/issues"
+  "@pika/pack": {
+    "pipeline": [
+      [
+        "@pika/plugin-standard-pkg"
+      ],
+      [
+        "@pika/plugin-build-node"
+      ],
+      [
+        "@pika/plugin-build-web"
+      ],
+      [
+        "@pika/plugin-build-types"
+      ]
+    ]
   },
-  "homepage": "https://github.com/sandiiarov/use-popper#readme"
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "dependencies": {
+    "popper.js": "1.14.7"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "7.0.0",
+    "@babel/preset-typescript": "7.3.3",
+    "@pika/pack": "0.3.5",
+    "@pika/plugin-build-node": "0.3.14",
+    "@pika/plugin-build-types": "0.3.14",
+    "@pika/plugin-build-web": "0.3.14",
+    "@pika/plugin-standard-pkg": "0.3.14",
+    "@types/react": "16.8.8",
+    "react": "16.8.5",
+    "react-dom": "16.8.5",
+    "typescript": "3.3.3333"
+  }
 }

New alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110879

23441.19%

Number of package files

7

600%

Lines of code

145

Infinity%

Number of medium quality alerts

0

-100%

Number of lines in readme file

6

Infinity%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

2

Infinity%

Dev dependency count

11

Infinity%

Number of low maintenance alerts

3

50%

Number of low supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  popper.js@1.14.7

• + Added

  popper.js@1.14.7
  (transitive)

• + Added

  react@19.2.5
  (transitive)