farzin-firoozi / react-modern-drawer Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://farzin-firoozi.github.io/react-modern-drawer/
License: MIT License
Home Page: https://farzin-firoozi.github.io/react-modern-drawer/
License: MIT License
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.
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 .
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.