Skip to content

Commit

Permalink
Merge pull request #19 from Farzin-Firoozi/feature/lock-background-sc…
Browse files Browse the repository at this point in the history 
…roll

Feature/lock background scroll
  • Loading branch information
@Farzin-Firoozi
Farzin-Firoozi authored Jan 18, 2023
2 parents 2b9ebb5 + ea71093 commit 7229733
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 78 deletions.
35 changes: 18 additions & 17 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.2)
![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-modern-drawer/1.1.2)
![npm bundle size (version)](https://img.shields.io/bundlephobia/min/react-modern-drawer/1.2.0)
![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-modern-drawer/1.2.0)
![NPM](https://img.shields.io/npm/l/react-modern-drawer)

## low bundle size with fantastic performance
Expand Down Expand Up @@ -70,21 +70,22 @@ 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 |
| customIdSuffix | string | no | A random string based on `Math.random()` | - | Used for making different ids for drawers, can be customized for special cases. |
| 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. |
| lockBackgroundScroll | boolean | no | false | - | Locks the body scroll when drawer is open. |

## Support

Expand Down
78 changes: 39 additions & 39 deletions example/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
{
"name": "react-modern-drawer-example",
"homepage": ".",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
"build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
"test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
"eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
},
"dependencies": {
"@types/node": "link:../node_modules/@types/node",
"@types/react": "link:../node_modules/@types/react",
"@types/react-dom": "link:../node_modules/@types/react-dom",
"eslint-config-react-app": "link:../node_modules/eslint-config-react-app",
"react": "link:../node_modules/react",
"react-dom": "link:../node_modules/react-dom",
"react-modern-drawer": "link:..",
"react-scripts": "link:../node_modules/react-scripts",
"typescript": "link:../node_modules/typescript"
},
"devDependencies": {
"@babel/plugin-syntax-object-rest-spread": "^7.8.3"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
"name": "react-modern-drawer-example",
"homepage": ".",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
"build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
"test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
"eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
},
"dependencies": {
"@types/node": "link:../node_modules/@types/node",
"@types/react": "link:../node_modules/@types/react",
"@types/react-dom": "link:../node_modules/@types/react-dom",
"eslint-config-react-app": "link:../node_modules/eslint-config-react-app",
"react": "link:../node_modules/react",
"react-dom": "link:../node_modules/react-dom",
"react-modern-drawer": "link:..",
"react-scripts": "link:../node_modules/react-scripts",
"typescript": "link:../node_modules/typescript"
},
"devDependencies": {
"@babel/plugin-syntax-object-rest-spread": "^7.8.3"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
20 changes: 18 additions & 2 deletions example/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4002,8 +4002,24 @@ escodegen@^2.0.0:
source-map "~0.6.1"

eslint-config-react-app@^7.0.0:
version "0.0.0"
uid ""
version "7.0.1"
resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz#73ba3929978001c5c86274c017ea57eb5fa644b4"
integrity sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==
dependencies:
"@babel/core" "^7.16.0"
"@babel/eslint-parser" "^7.16.3"
"@rushstack/eslint-patch" "^1.1.0"
"@typescript-eslint/eslint-plugin" "^5.5.0"
"@typescript-eslint/parser" "^5.5.0"
babel-preset-react-app "^10.0.1"
confusing-browser-globals "^1.0.11"
eslint-plugin-flowtype "^8.0.3"
eslint-plugin-import "^2.25.3"
eslint-plugin-jest "^25.3.0"
eslint-plugin-jsx-a11y "^6.5.1"
eslint-plugin-react "^7.27.1"
eslint-plugin-react-hooks "^4.3.0"
eslint-plugin-testing-library "^5.0.1"

"eslint-config-react-app@link:../node_modules/eslint-config-react-app":
version "0.0.0"
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.2",
"version": "1.2.0",
"description": "Creating drawers in react made easy!",
"author": "Farzin-Firoozi",
"license": "MIT",
Expand Down
61 changes: 42 additions & 19 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import * as React from 'react'
import React, { useEffect, useMemo, useRef } from 'react'
import type { CSSProperties } from 'react'
import './styles.scss'

type Props = {
open: boolean
onClose?: () => void
direction: 'left' | 'right' | 'top' | 'bottom'
lockBackgroundScroll?: boolean
children?: React.ReactNode
duration?: number
overlayOpacity?: number
Expand Down Expand Up @@ -62,32 +64,53 @@ const getDirectionStyle = (
}
}

const EZDrawer: React.FC<Props> = function ({
open,
onClose = () => {},
children,
style,
enableOverlay = true,
overlayColor = '#000',
overlayOpacity = 0.4,
zIndex = 100,
duration = 500,
direction,
size = 250,
className,
customIdSuffix,
}): JSX.Element {
const idSuffix = React.useMemo(() => {
const EZDrawer: React.FC<Props> = (props) => {
const {
open,
onClose = () => {},
children,
style,
enableOverlay = true,
overlayColor = '#000',
overlayOpacity = 0.4,
zIndex = 100,
duration = 500,
direction,
size = 250,
className,
customIdSuffix,
lockBackgroundScroll = false,
} = props

const bodyRef = useRef<HTMLBodyElement | null>(null)

useEffect(() => {
const updatePageScroll = () => {
bodyRef.current = window.document.querySelector('body')

if (bodyRef.current && lockBackgroundScroll) {
if (open) {
bodyRef.current.style.overflow = 'hidden'
} else {
bodyRef.current.style.overflow = ''
}
}
}

updatePageScroll()
}, [open])

const idSuffix = useMemo(() => {
return customIdSuffix || (Math.random() + 1).toString(36).substring(7)
}, [customIdSuffix])

const overlayStyles: React.CSSProperties = {
const overlayStyles: CSSProperties = {
backgroundColor: `${overlayColor}`,
opacity: `${overlayOpacity}`,
zIndex: zIndex,
}

const drawerStyles: React.CSSProperties = {
const drawerStyles: CSSProperties = {
zIndex: zIndex + 1,
transitionDuration: `${duration}ms`,
...getDirectionStyle(direction, size),
Expand Down

0 comments on commit 7229733

Please sign in to comment.