@delangle/use-modal - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

package.json

 {
   "name": "@delangle/use-modal",
-  "version": "0.0.1",
+  "version": "0.1.0",
+  "description": "React hook for modal management",
   "private": false,
-  "description": "React hook for modal management",
   "sideEffects": false,
-  "main": "./index.js",
-  "types": "./typings/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/typings/index.d.ts",
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "build": "npm run clean && bili && npm run build:types",
+    "build:dev": "npm run clean && tsc",
+    "build:watch": "npm run clean && tsc --watch",
+    "build:types": "tsc --emitDeclarationOnly",
+    "publish": "npm publish --access public",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "type:coverage": "tscov -d",
+    "lint": "eslint \"src/**\""
+  },
   "repository": {
@@ -18,8 +31,39 @@ "type": "git",
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
   "homepage": "https://github.com/flaviendelangle/use-modal#readme",
-  "dependencies": {},
-  "module": "./index.esm.js",
   "peerDependencies": {
     "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@habx/eslint-config-client": "^2.0.6",
+    "@liftr/tscov": "^1.4.1",
+    "@testing-library/dom": "^6.0.1",
+    "@testing-library/react": "^8.0.1",
+    "@types/jest": "^24.0.15",
+    "@types/react": "^16.8.20",
+    "@types/sinon": "^7.0.13",
+    "bili": "^4.8.0",
+    "cross-env": "^5.2.0",
+    "husky": "^3.0.0",
+    "jest": "^24.8.0",
+    "lint-staged": "^9.0.1",
+    "react": "^16.9.0",
+    "react-hooks-testing-library": "^0.6.0",
+    "react-test-renderer": "^16.9.0",
+    "rimraf": "^2.6.3",
+    "rollup-plugin-typescript2": "^0.22.0",
+    "sinon": "^7.3.2",
+    "ts-jest": "^24.0.2",
+    "typescript": "^3.5.2"
   }
-}
+}

README.md

@@ -1,1 +0,111 @@
-## useModal
+## useModal
+
+Handle the most common use cases to create a Modal-like component :
+
+- animation on enter / leave
+- close when press Escape of click outside
+
+The rendering part is up to you, this hook can be used for modals, drawers, dropdown menus and pretty much any thing with an opened and closed state.
+
+### Usage
+
+#### Simple example
+
+```jsx harmony
+import * as React from 'react'
+
+const Modal = () => {
+  const [open, setOpen] = React.useState(false)
+  const modal = useModal({ open, onClose: () => setOpen(false) })
+
+  return (
+    <React.Fragment>
+      <button onClick={() => setOpen(true)}>Open</button>
+      <dialog open={modal.state === 'opened'}>
+        Hello World
+      </dialog>
+    </React.Fragment>
+  )
+}
+```
+
+
+#### Add fadeIn / fadeOut animation
+
+```jsx harmony
+import * as React from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const FADE_IN = keyframes`
+  from {
+    background-color: transparent;
+  }
+
+  to {
+    background-color: rgba(50, 50, 50, 0.7);
+  }
+`
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  z-index: 10;
+
+  &[data-state='opening'] {
+    animation: ${FADE_IN} 300ms linear 0ms;
+  }
+
+  &[data-state='closing'] {
+    animation: ${FADE_IN} 300ms linear 0ms reverse;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &[data-state='closed'] {
+    opacity: 0;
+    pointer-events: none;
+  }
+`
+
+const Modal = () => {
+  const [open, setOpen] = React.useState(false)
+  const modal = useModal({
+    open,
+    onClose: () => setOpen(false),
+    animated: true,
+    animationDuration: 300,
+  })
+
+  return (
+    <React.Fragment>
+      <button onClick={() => setOpen(true)}>Open</button>
+      <Overlay data-state={modal.state}>
+          <dialog open={modal.state !== 'closed'}>
+            Hello World
+          </dialog>
+      </Overlay>
+    </React.Fragment>
+  )
+}
+```
+
+
+### API
+
+#### ModalConfig
+
+| name | description | type | default value |
+| --- | --- | --- | --- |
+| open | is the modal open | boolean | false |
+| onClose | callback to close the modal | function | - |
+| persistent | should avoid closing the modal when press Escape or click outside | boolean | false |
+| animated | should have a "opening" and "closing" state to allow CSS animations | boolean | false |
+| animationDuration | time spent (in ms) in the "opening" and "closing" state | number | 300 |
+| ref | React reference to the main DOM Node of the Modal (useful if your modal use React.forwardRef) | React.Ref | null | 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16572

increased by67.38%

Lines of code

372

increased by63.16%

Number of lines in readme file

112

increased by11100%

Worsened metrics

Dev dependency count

20

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes