react-use-face-detection - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

package.json

 {
   "name": "react-use-face-detection",
-  "version": "0.0.3",
-  "main": "build/index.js",
-  "module": "build/index.esm.js",
-  "files": [
-    "build"
-  ],
-  "types": "build/index.d.ts",
-  "description": "Face detection React hook powered by @mediapipe/face_detection, @mediapipe/camera_utils, react-webcam",
-  "scripts": {
-    "dev": "rollup -c -w",
-    "build": "rollup -c",
-    "test": "jest",
-    "lint": "eslint '*/**/*.{js,ts,tsx}' --fix",
-    "test:watch": "jest --watch",
-    "prepublishOnly": "yarn build",
-    "add:react": "node scripts/add_react",
-    "rm:react": "node scripts/remove_react",
-    "link:react": "yarn link \"react\" \"react-dom\" && yarn rm:react"
-  },
-  "keywords": [
-    "React",
-    "Library",
-    "Rollup",
-    "Typescript",
-    "Face Detection",
-    "Face",
-    "Hooks",
-    "@mediapipe/face_detection",
-    "Machine Learning",
-    "MediaPipe"
-  ],
-  "author": "Irvin Ives Lau",
+  "version": "0.0.4",
+  "description": "",
+  "author": "lauirvin",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/lauirvin/react-use-face-detection/issues"
+  "repository": "lauirvin/react-use-face-detection",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "jsnext:main": "dist/index.es.js",
+  "engines": {
+    "node": ">=8",
+    "npm": ">=5"
   },
-  "homepage": "https://github.com/lauirvin/react-use-face-detection",
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+  "scripts": {
+    "test": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "build": "rollup -c && tsc -d --emitDeclarationOnly --noEmit false --declarationDir dist",
+    "start": "rollup -c -w",
+    "prepare": "yarn run build",
+    "predeploy": "cd example && yarn install && yarn run build",
+    "deploy": "gh-pages -d example/build"
   },
@@ -47,48 +28,28 @@ "dependencies": {
     "@mediapipe/face_detection": "^0.4.1646425229",
-    "@testing-library/react": "^10.0.2",
     "react-webcam": "^7.0.1"
   },
+  "peerDependencies": {
+    "react": "^16.9.0"
+  },
   "devDependencies": {
-    "@babel/core": "^7.10.3",
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-image": "^2.0.5",
-    "@rollup/plugin-node-resolve": "^7.1.3",
-    "@testing-library/jest-dom": "^5.5.0",
-    "@types/jest": "^24.0.24",
-    "@types/react": "^16.9.12",
-    "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
-    "babel-loader": "^8.1.0",
-    "babel-preset-react-app": "^9.1.2",
-    "eslint": "^7.14.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^12.0.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.3.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.9.0",
-    "lint-staged": "^10.5.2",
-    "prettier": "2.2.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "rollup": "^1.27.4",
-    "rollup-plugin-copy": "^3.3.0",
+    "@babel/core": "^7.2.2",
+    "@babel/runtime": "^7.3.1",
+    "@rollup/plugin-babel": "^5.2.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-typescript": "^5.0.2",
+    "@rollup/plugin-url": "^5.0.1",
+    "@testing-library/react-hooks": "^3.2.1",
+    "@types/jest": "^23.3.13",
+    "@types/react": "^16.7.22",
+    "cross-env": "^5.2.0",
+    "gh-pages": "^2.0.1",
+    "react": "^16.9.0",
+    "react-scripts": "^3.4.0",
+    "react-test-renderer": "^16.9.0",
+    "rollup": "^2.26.9",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.27.0",
-    "ts-jest": "^26.4.4",
-    "typescript": "^3.7.2"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn lint && yarn build && yarn prettier --write '*/**/*.{js,ts,tsx}'",
-      "pre-push": ""
-    }
+    "tslib": "^2.0.1",
+    "typescript": "^3.2.4"
   }
 }

README.md

@@ -1,55 +0,36 @@
-<p align="center">
-  <a href="https://github.com/lauirvin/react-use-face-detection">
-    <img style="filter: invert(36%) sepia(63%) saturate(1829%) hue-rotate(175deg) brightness(82%) contrast(87%);" alt="logo" src="https://seeklogo.com/images/F/face-id-logo-6DA02A33C5-seeklogo.com.png" width="150" />
-  </a>
-</p>
-<h1 align="center">
-  useFaceDetection Hook
-</h1>
+# use-face-detection
 
-## 🧰 Installation
+> 
 
-To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):
+[![NPM](https://img.shields.io/npm/v/use-face-detection.svg)](https://www.npmjs.com/package/use-face-detection) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-**npm**
+## Install
 
-```sh
-npm install react-use-face-detection
+```bash
+npm install --save use-face-detection
 ```
 
-**yarn**
+## Usage
 
-```sh
-yarn add react-use-face-detection
-```
+```tsx
+import * as React from 'react'
 
-## ⚙️ Options
+import { useMyHook } from 'use-face-detection'
 
-| Name                 | Type                                                 | Description                                                                                                                                                                                      |
-| -------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| mirrored             | boolean \| undefined                                 | This enables a mirrored detection of the faces in the provided media source - e.g. if you flip the media source horizontally, this would enable the correct output of your flipped media source. |
-| handleOnResults      | (results: FaceDetectionResults) => void \| undefined | Callback function that returns the FaceDetectionResults                                                                                                                                          |
-| faceDetectionOptions | FaceDetectionOptions \| undefined                    | Options for configuring the face detection model - see https://google.github.io/mediapipe/solutions/face_detection.html#javascript-solution-api                                                  |
+const Example = () => {
+  const example = useMyHook()
+  return (
+    <div>
+      {example}
+    </div>
+  )
+}
+```
 
-## 🏹 Returned values
+## License
 
-| Name          | Type                        | Description                                                                                              |
-| ------------- | --------------------------- | -------------------------------------------------------------------------------------------------------- |
-| boundingBox   | BoundingBox[]               | Returns details and coordinates of the bounding box around the detected face(s)                          |
-| isLoading     | boolean                     | Returns a boolean that detects whether if the model has been loaded                                      |
-| detected      | boolean                     | Returns a boolean that detects whether if a face has been detected                                       |
-| facesDetected | number                      | Returns a number of faces that have been detected                                                        |
-| webcamRef     | RefObject<Webcam>           | Returns a ref object for the [react-webcam](https://www.npmjs.com/package/react-webcam) `<Webcam/>` node |
-| imgRef        | RefObject<HTMLImageElement> | Returns a ref object for the `<img/>` element                                                            |
+MIT © [lauirvin](https://github.com/lauirvin)
 
-## 👷 Built With
+---
 
-- [ReactJS](https://reactjs.org/) - Frontend Javascript web framework
-- [TypeScript](https://www.typescriptlang.org/) - Open-source language which builds on JavaScript
-- [MediaPipe](https://google.github.io/mediapipe/) - Machine Learning framework
-- [Jest](https://jestjs.io/) - JavaScript testing framework
-
-## 📚 Author
-
-- **Irvin Ives Lau** - [lauirvin](https://github.com/lauirvin)
-- https://www.irviniveslau.com
+This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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 website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Improved metrics

Dependency count

4

-33.33%

Dev dependency count

19

-45.71%

Number of package files

19

137.5%

Lines of code

677

107.03%

Worsened metrics

Total package byte prevSize

196146

-31.37%

Number of low maintenance alerts

1

Infinity%

Number of low quality alerts

3

50%

Number of lines in readme file

37

-33.93%

Number of medium supply chain risk alerts

2

100%

Dependency changes

• + Added

  loose-envify@1.4.0
  (transitive)

• + Added

  object-assign@4.1.1
  (transitive)

• + Added

  prop-types@15.8.1
  (transitive)

• + Added

  react@16.14.0
  (transitive)

• + Added

  react-is@16.13.1
  (transitive)

• - Removed

  @testing-library/react@^10.0.2

• - Removed

  @babel/code-frame@7.27.1
  (transitive)

• - Removed

  @babel/helper-validator-identifier@7.27.1
  (transitive)

• - Removed

  @babel/runtime@7.27.1
  (transitive)

• - Removed

  @babel/runtime-corejs3@7.27.1
  (transitive)

• - Removed

  @jest/types@26.6.2
  (transitive)

• - Removed

  @testing-library/dom@7.31.2
  (transitive)

• - Removed

  @testing-library/react@10.4.9
  (transitive)

• - Removed

  @types/aria-query@4.2.2
  (transitive)

• - Removed

  @types/istanbul-lib-coverage@2.0.6
  (transitive)

• - Removed

  @types/istanbul-lib-report@3.0.3
  (transitive)

• - Removed

  @types/istanbul-reports@3.0.4
  (transitive)

• - Removed

  @types/node@22.15.18
  (transitive)

• - Removed

  @types/yargs@15.0.19
  (transitive)

• - Removed

  @types/yargs-parser@21.0.3
  (transitive)

• - Removed

  ansi-regex@5.0.1
  (transitive)

• - Removed

  ansi-styles@4.3.0
  (transitive)

• - Removed

  aria-query@4.2.2
  (transitive)

• - Removed

  chalk@4.1.2
  (transitive)

• - Removed

  color-convert@2.0.1
  (transitive)

• - Removed

  color-name@1.1.4
  (transitive)

• - Removed

  core-js-pure@3.42.0
  (transitive)

• - Removed

  dom-accessibility-api@0.5.16
  (transitive)

• - Removed

  has-flag@4.0.0
  (transitive)

• - Removed

  lz-string@1.5.0
  (transitive)

• - Removed

  picocolors@1.1.1
  (transitive)

• - Removed

  pretty-format@26.6.2
  (transitive)

• - Removed

  react-is@17.0.2
  (transitive)

• - Removed

  supports-color@7.2.0
  (transitive)

• - Removed

  undici-types@6.21.0
  (transitive)