Skip to content

Commit

Permalink
Merge pull request #14 from Farzin-Firoozi/feature/customIdSuffix
Browse files Browse the repository at this point in the history 
Add customIdSuffix and memo idSuffix
  • Loading branch information
@Farzin-Firoozi
Farzin-Firoozi authored Jul 18, 2022
2 parents c199897 + 75c288d commit 2b9ebb5
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 18 deletions.
39 changes: 23 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
[![NPM](https://img.shields.io/npm/v/react-modern-drawer.svg)](https://www.npmjs.com/package/react-modern-drawer)
![npm](https://img.shields.io/npm/dt/react-modern-drawer)
![npm](https://img.shields.io/npm/dw/react-modern-drawer)
![npm bundle size (version)](https://img.shields.io/bundlephobia/min/react-modern-drawer/1.1.0)
![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-modern-drawer/1.1.0)
![npm bundle size (version)](https://img.shields.io/bundlephobia/min/react-modern-drawer/1.1.2)
![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-modern-drawer/1.1.2)
![NPM](https://img.shields.io/npm/l/react-modern-drawer)

## low bundle size with fantastic performance
Expand All @@ -15,6 +15,12 @@

[click here to see the demo](https://farzin-firoozi.github.io/react-modern-drawer/)

## 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

```bash
Expand Down Expand Up @@ -64,20 +70,21 @@ export default App

## API

| 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. |

## Support

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-modern-drawer",
"version": "1.1.1",
"version": "1.1.2",
"description": "Creating drawers in react made easy!",
"author": "Farzin-Firoozi",
"license": "MIT",
Expand Down
6 changes: 5 additions & 1 deletion src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ type Props = {
zIndex?: number
size?: number | string
className?: string | undefined
customIdSuffix?: string | undefined
}

const getDirectionStyle = (
Expand Down Expand Up @@ -74,8 +75,11 @@ const EZDrawer: React.FC<Props> = function ({
direction,
size = 250,
className,
customIdSuffix,
}): JSX.Element {
const idSuffix = (Math.random() + 1).toString(36).substring(7)
const idSuffix = React.useMemo(() => {
return customIdSuffix || (Math.random() + 1).toString(36).substring(7)
}, [customIdSuffix])

const overlayStyles: React.CSSProperties = {
backgroundColor: `${overlayColor}`,
Expand Down

0 comments on commit 2b9ebb5

Please sign in to comment.