Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-modern-drawer
Advanced tools
react-modern-drawer - npm Package Compare versions
Comparing version 1.1.1 to 1.1.2
@@ -16,4 +16,5 @@ import * as React from 'react'; | ||
| className?: string | undefined; | ||
| customIdSuffix?: string | undefined; | ||
| }; | ||
| declare const EZDrawer: React.FC<Props>; | ||
| export default EZDrawer; |
@@ -85,4 +85,7 @@ var React = require('react'); | ||
| size = _ref$size === void 0 ? 250 : _ref$size, | ||
| className = _ref.className; | ||
| var idSuffix = (Math.random() + 1).toString(36).substring(7); | ||
| className = _ref.className, | ||
| customIdSuffix = _ref.customIdSuffix; | ||
| var idSuffix = React.useMemo(function () { | ||
| return customIdSuffix || (Math.random() + 1).toString(36).substring(7); | ||
| }, [customIdSuffix]); | ||
| var overlayStyles = { | ||
@@ -89,0 +92,0 @@ backgroundColor: "" + overlayColor, |
@@ -1,2 +0,2 @@ | ||
| import { createElement } from 'react'; | ||
| import { useMemo, createElement } from 'react'; | ||
@@ -85,4 +85,7 @@ function _extends() { | ||
| size = _ref$size === void 0 ? 250 : _ref$size, | ||
| className = _ref.className; | ||
| var idSuffix = (Math.random() + 1).toString(36).substring(7); | ||
| className = _ref.className, | ||
| customIdSuffix = _ref.customIdSuffix; | ||
| var idSuffix = useMemo(function () { | ||
| return customIdSuffix || (Math.random() + 1).toString(36).substring(7); | ||
| }, [customIdSuffix]); | ||
| var overlayStyles = { | ||
@@ -89,0 +92,0 @@ backgroundColor: "" + overlayColor, |
| { | ||
| "name": "react-modern-drawer", | ||
| "version": "1.1.1", | ||
| "version": "1.1.2", | ||
| "description": "Creating drawers in react made easy!", | ||
@@ -5,0 +5,0 @@ "author": "Farzin-Firoozi", |
@@ -8,4 +8,4 @@ # react-modern-drawer | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
@@ -19,2 +19,8 @@ | ||
| ## Browsers support | ||
| | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | | ||
| | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | All | All | All | All | All | All | All | | ||
| ## Install | ||
@@ -69,16 +75,17 @@ | ||
| | api | type | required | default | value | desciption | | ||
| | -------------- | ------------------- | -------- | --------- | ----------------------------------------- | ------------------------------------------------------------------------------------------- | | ||
| | direction | string | yes | "right" | "right" , "left" , "top","bottom" | Selecting the direction that drawer opens | | ||
| | open | boolean | yes | false | true , false | Select when to show drawer | | ||
| | onClose | function | no | ( )=>{ } | any executable function | This function is called when clicking on backdrop layer usually used for closing the drawer | | ||
| | size | number or string | no | 250 | integer or '{integer}px' or '{integer}vw' | Determines the size of drawer | | ||
| | style | React.CSSProperties | no | null | Normal stylings | Can be used for inline styles | | ||
| | duration | number | no | 300 | Any positive Integer | Determines the duration of opening the drawer | | ||
| | overlayOpacity | number | no | 0.4 | Number between 0 and 1 | Determines the opacity of overlay | | ||
| | overlayColor | string | no | "#000" | Any color code | Determines the color of overlay | | ||
| | enableOverlay | boolean | no | true | true , false | Determines whether to show the overlay | | ||
| | zIndex | number | no | 100 | Any positive Integer | Determines the zIndex of drawer | | ||
| | children | React.ReactNode | no | null | Any ReactNode | This is the same as props.children | | ||
| | className | string | no | undefined | - | normal regular classNames and stuff | | ||
| | api | type | required | default | value | desciption | | ||
| | -------------- | ------------------- | -------- | ---------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------- | | ||
| | direction | string | yes | "right" | "right" , "left" , "top","bottom" | Selecting the direction that drawer opens | | ||
| | open | boolean | yes | false | true , false | Select when to show drawer | | ||
| | onClose | function | no | ( )=>{ } | any executable function | This function is called when clicking on backdrop layer usually used for closing the drawer | | ||
| | size | number or string | no | 250 | integer or '{integer}px' or '{integer}vw' | Determines the size of drawer | | ||
| | style | React.CSSProperties | no | null | Normal stylings | Can be used for inline styles | | ||
| | duration | number | no | 300 | Any positive Integer | Determines the duration of opening the drawer | | ||
| | overlayOpacity | number | no | 0.4 | Number between 0 and 1 | Determines the opacity of overlay | | ||
| | overlayColor | string | no | "#000" | Any color code | Determines the color of overlay | | ||
| | enableOverlay | boolean | no | true | true , false | Determines whether to show the overlay | | ||
| | zIndex | number | no | 100 | Any positive Integer | Determines the zIndex of drawer | | ||
| | children | React.ReactNode | no | null | Any ReactNode | This is the same as props.children | | ||
| | className | string | no | undefined | - | normal regular classNames and stuff | | ||
| | customIdSuffix | string | no | A random string based on `Math.random()` | - | Used for making different ids for drawers, can be customized for special cases. | | ||
@@ -85,0 +92,0 @@ ## Support |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by22.34%
32775
- Lines of code
- increased by2.75%
262
- Number of lines in readme file
- increased by7.22%
104
No dependency changes