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

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"
    },

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?

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

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.

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

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 :)

Could you add an optional close icon to the Drawer component? This feature will enhance the user experience by providing a clear and easy way to close the drawer. The close icon should be customizable and configurable via props.

I would like to work on this feature. Please assign it to me.

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

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

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

Does anyone know how to resolve?

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 .

my code

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

Im using nextjs14

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

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

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.

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.

I have multiple drawer,

I can open/close the first drawer works excellent, no problem, but if I open the second drawer, then I click out of the drawer for close, it running onClose function for the first drawer. You can put console log to onClose functions for testing.

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

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

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

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.

when using iphone device scroll doesnt work add

import 'react-modern-drawer/dist/index.css';

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.

hi guys

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

thanks

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