This content originally appeared on DEV Community and was authored by Josiah Bryan
TL;DR: Source for
BottomPanel.jsxandBottomPanel.module.scssis at
https://gist.github.com/josiahbryan/c220708256f7c8d79760aff37f64948f.Live Demo: https://josiahbryan.com/#/bottompanel-demo
I've been working on a couple of different projects lately, one involves working on the next-generation marketplace for fringe.us, and the other project is an app for a luxury driving service.
Both of these projects called for a bottom panel that can be partially exposed and then dragged/swiped up to reveal content.
I searched high and low and could not find any acceptable implementations of just such a UI component in React - which was rather shocking, I thought surely someone had solved this rather common UI paradigm already for React!
I found many implementations of the paradigm in non-web-React formats, here's a couple examples that show what I wanted:
- React Native: https://github.com/enesozturk/rn-swipeable-panel
- Flutter: https://github.com/enesozturk/rn-swipeable-panel
Both of those packages look beautiful and I would love to use them! However, the projects I'm working on require React in a browser, so those packages are not options.
I almost gave up on finding a solution, but yesterday I decided to give it one last try. I thought surely I can implement it myself! I first tried extracting the SwipeableDrawer component from @material-ui's source, but that proved incredibly painful and never got that working.
Then I tried writing a simple implementation of a drawer myself using react-swipeable's awesome hook. That worked okay, but the FPS (especially on mobile) was HORRIBLE. I'm talking ~10-~12 fps when dragging. NOT accetable.
Then, almost as if by providence, I stumbled upon this section in react-swipeable's docs: https://github.com/FormidableLabs/react-swipeable#how-to-use-touch-action-to-prevent-scrolling - that mentioned a package I hadn't looked at yet, use-gesture. By this point, I was exhausted from reading docs and thought that I would just glance at that package, but didn't think anything would be useful. Boy, was I wrong.
I read the docs in use-gesture and was subtly impressed. Then I found their examples page, which led me to their example for an "Action Sheet": https://codesandbox.io/embed/zuwji?file=/src/index.js&codemirror=1 - needless to say, I was incredibly impressed!
I set about porting their code with very minimal tweaks into a reusable BottomDrawer component that had the various extra niceties I wanted:
- Drag handle at the top
- Customizable open size / closed size
- Scrollable content area inside the sheet
After a good two hours of banging my head against the keyboard, I finally solved all the things I needed and created the following beautiful component (screenshot is at the top of this post). I call it <BottomPanel> - I know, so original - my excuse is I like to KISS.
To see a live working example of this component, head over to my website:
Example of <BottomPanel> closed:
Example of <BottomPanel> open:
Usable like this:
<BottomPanel
maxOpenHeight={window.innerHeight * 0.8} // px
closedPanelSize={200} // px
>
<LoremIpsum />
</BottomPanel>
You can find the full source for BottomPanel.jsx and the required styles (BottomPanel.module.scss) in the following gist:
https://gist.github.com/josiahbryan/c220708256f7c8d79760aff37f64948f.
Cheers!
-Josiah Bryan
This content originally appeared on DEV Community and was authored by Josiah Bryan
Josiah Bryan | Sciencx (2021-08-21T19:01:32+00:00) React Draggable Bottom Panel. Retrieved from https://www.scien.cx/2021/08/21/react-draggable-bottom-panel/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.