farzin-firoozi / react-modern-drawer Goto Github PK

View Code? Open in Web Editor NEW

189.0 2.0 19.0 1.28 MB

Home Page: https://farzin-firoozi.github.io/react-modern-drawer/

License: MIT License

HTML 15.30% TypeScript 72.00% CSS 9.45% JavaScript 3.25%

react react-component

react-modern-drawer's Introduction

react-modern-drawer

creating drawers made easy!

Low bundle size with fantastic performance

Demo 💻🔥

click here to see the demo

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
All	All	All	All	All	All	All

Install

npm install --save react-modern-drawer

or if you are using yarn :

yarn add react-modern-drawer

Usage

import React from 'react'

// import component 👇
import Drawer from 'react-modern-drawer'

//import styles 👇
import 'react-modern-drawer/dist/index.css'

const App = () => {
    const [isOpen, setIsOpen] = React.useState(false)
    const toggleDrawer = () => {
        setIsOpen((prevState) => !prevState)
    }

    return (
        <>
            <button onClick={toggleDrawer}>Show</button>
            <Drawer
                open={isOpen}
                onClose={toggleDrawer}
                direction='right'
                className='bla bla bla'
            >
                <div>Hello World</div>
            </Drawer>
        </>
    )
}

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

If you like this package please consider giving it a star.

Contribution

clone the project and run yarn install then run yarn start to run the main project.

then cd example and run yarn start to start the development example in order to test the component.

any PRs are welcome!

License

MIT © Farzin-Firoozi

react-modern-drawer's People

Contributors

Stargazers

Watchers

Forkers

react-modern-drawer's Issues

Support React 17.0.2

Try npm I react-modern-drawer:

code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from [email protected]
npm ERR! node_modules/react-modern-drawer
npm ERR! react-modern-drawer@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Overlay class

Hi,
is it possible to add a new feature to add a classname for the overlay?

Parent drawer intercepting the default onClose handler of child drawer.

I have an app where I have a drawer rendering in a parent component. This drawer works fine and closes when I click outside the drawer. This parent component has a child component who also has a drawer. When I try closing this drawer by clicking on the overlay in the child component, the parent drawer's onClose function is activated and the child drawer stays open. I confirmed this behavior using a console.log in the parent onClose function.

Is there an easy fix for this, or do I need to find a workaround?

Thank you in advance :)

SSR Issue: Prop id did not match

I'm currently using this drawer component in my SSR remix app. Since this component is being rendered both on the server and on the client, I end up with the component having two different id props:

Could you please add the ability to pass idSuffix as a prop, so the Math.random() doesn't get run twice for server and client and they will match.

Here's a similar issue from react-select: JedWatson/react-select#2629

How to close drawer on click inside overlay

I want to close drawer when user clicks on overlay area
Is there any way we can do this using component props?

Size can be string

Size type declared as number but it can be string too. For example, it can be one of those px, vh, vw etc.

disable close when click on overlay

hi guys

could u add property to disable close when click on overlay?

thanks

Content of the drawer is hydrated, even if the drawer is closed,

The content of the drawer is created on the DOM even when the drawer is closed. Which cases issue if we use useEffect hook on the drawer component itself. I also load the unnecessary components in the DOM.

As for my current workflow, I check the isOpen prop before rendering the components in the wrapper.

Click the mask and don't want to close the drawer

Click the mask and don't want to close the drawer。Are there any parameters to set？

Adding Close Button (optional) and Full screen Drawer

Hi,

Having an in-built close at the top left or right corner of the drawer will be a great feature. Showing the close button can be optional and controlled by a prop.

Also, how can a fullscreen be achieved and must be very presentable on mobile? The in-built close button should be automatically on when on fullscreen.

Lock background scroll

A common feature of modals or drawers is to lock the background scroll when the drawer is open, usually by hiding the overflow on the body.

This might be a nice feature to be able to toggle on with a prop. Thoughts?

Make drawer scrollable

Is there any methods to make this drawer scrollable ? Thanks for help.

Prop Mismatch on Client vs Server [NextJS]

Issue is presenting itself when using nextjs which by default uses Server Components. I tried wrapping the component in a wrapper using the 'use client' directive but still seeing the issue. Curious if any one else has run into this and has some insight into how to fix it.

Did not match error in Next js 13.2

Hello, when I want to use the react-modern-drawer in Next.js 13.2 I get this error:

client.js?4d30:1 Warning: Prop `id` did not match. Server: "EZDrawer__checkboxsls2" Client: "EZDrawer__checkboxkkxwi"
    at input
    at div
    at EZDrawer (webpack-internal:///./node_modules/react-modern-drawer/dist/index.modern.js:70:20)
    at section
    at DeawerNext (webpack-internal:///./pages/components/DeawerNext.tsx:14:11)
    at Navigation (webpack-internal:///./pages/components/Navigation.tsx:22:80)
    at section
    at main
    at Home
    at App (webpack-internal:///./pages/_app.tsx:12:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:303:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:852:919)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11) 

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Thank you in advance

Is there a way to set the Bottom drawer width?

Responsive Sizing?

Does the drawer support responsive sizing? I want a drawer that is 50vw and then 100vw at a breakpoint, is that possible?
I am finding that if I pass a size value (in any of the allowed formats) the drawer does not adapt to window width. However if I pass an empty string the drawer becomes responsive but at some preset width on larger screens and full width on small screens.

onClose function issue

Hello, like #3 I have a problem with the onClose .

And I think I know why .

you are using, non uniq ids for the drawers . So, if I use two drawers, one open, and one closed, I have two elements with Id EZDrawer__overlay .

And because you are using label for checkbox . I think when you click on #EZDrawer__overlay from Drawer2, it will check one of the two #EZDrawer__checkbox, and not always the correct one . In my case, Drawer1 is before in the HTML tree, so (I think) clicking on Drawer2 overlay, call the Drawer1 onclose function .

A solution can be to append ids from useId on your elements . And use a className for CSS .

After some search, useId will be available in React 18 not before ... so a Date.now() can be enough to get uniq id .

css blur

For this component when I use backdropFilter:"blur(10px)" blue does not work.

Scoll of the main page gets lost after Drawer closes.

So, I am using this, the problem the scroll of the page over which drawer draws gets lost after drawer is closed.

Warning: Prop `id` did not match. Server: "EZDrawercheckboxelyhn" Client: "EZDrawercheckboxghn8c"

my code

It's working, but it keeps this warning in the log

Im using nextjs14

overlay

Nested drawers?

Hi, how does this component work with nested drawers like in this example?
https://plnkr.co/edit/fojeyUjllAJ5UYejYf0m?p=preview&preview
Been thinking how to implement it myself. The example is referenced in this stack overflow question.
https://stackoverflow.com/questions/29807207/reactjs-sidebar-with-multiple-views

Problem using Drawer

I'm trying to use Drawer in my project but I'm getting the following error

Does anyone know how to resolve?

Wrong react peerDependency in package.json

Because of peerDependency that you have added to the package.json it's not possible to use the package with react 17
as of npm 7 came the peerDeps concept had some changes.

simply if you want to make it workable with react 17 you can add

    "peerDependencies": {
        "react": ">16.0.0"
    },