@delangle/use-modal - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

package.json

 {
   "name": "@delangle/use-modal",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "React hook for modal management",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -6,10 +6,16 @@ ## useModal
 - animation on enter / leave
-- close when press Escape of click outside
+- close when press Escape or 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
+[Usage](#usage)
 
+[API](#api)
+
+
+## Usage
+
+### Simple example
+
 ```jsx harmony
@@ -34,3 +40,3 @@ import * as React from 'react'
 
-#### Add fadeIn / fadeOut animation
+### Add fadeIn / fadeOut animation
 
@@ -63,7 +69,7 @@ ```jsx harmony
 
-  &[data-state='opening'] {
+  .opening {
     animation: ${FADE_IN} 300ms linear 0ms;
   }
 
-  &[data-state='closing'] {
+  .closing {
     animation: ${FADE_IN} 300ms linear 0ms reverse;
@@ -74,3 +80,3 @@ opacity: 0;
 
-  &[data-state='closed'] {
+  .closed {
     opacity: 0;
@@ -93,3 +99,3 @@ pointer-events: none;
       <button onClick={() => setOpen(true)}>Open</button>
-      <Overlay data-state={modal.state}>
+      <Overlay className={modal.state}>
           <dialog open={modal.state !== 'closed'}>
@@ -104,6 +110,11 @@ Hello World
 
+## API
 
-### API
+```typescript jsx
+declare const useModal: <ContainerElement extends HTMLElement = HTMLDivElement>(
+  baseConfig: Partial<ModalConfig<ContainerElement>>
+) => Modal<ContainerElement>
+```
 
-#### ModalConfig
+### ModalConfig
 
@@ -117,2 +128,11 @@ | name | description | type | default value |
 | 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 | 
+| ref | React reference to the main DOM Node of the Modal (useful if your modal use React.forwardRef\<ContainerElement\>) | React.Ref | null | 
+
+#### Modal\<ContainerElement\>
+
+| name | description | type |
+| --- | --- | --- |
+| state | current state of the modal | 'opened' / 'closed' / 'opening' / 'closing' |
+| close | callback to close the modal | () => void |
+| ref | React reference to pass to the main DOM Node of the Modal | React.Ref\<ContainerElement\> |
+| hasAlreadyBeenOpened | Has the Modal already been in state = "opened" | boolean |

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

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

39827

increased by2.3%

Number of package files

23

increased by4.55%

Number of lines in readme file

132

increased by17.86%

No dependency changes