react-swipeable-drawer
A swipeable drawer for the mobile web
The problem
Every time I see a hamburger menu and a drawer, I try to swipe it open.
This solution
A tiny react library, with no dependencies, that relies mostly on css transforms.
Installation
This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies
:
npm install --save react-swipeable-drawer
This package also depends on
react
andprop-types
. Please make sure you have those installed as well.
Usage
See the complete example.
react-swipeable-drawer
allows to either use the built-in components out of the box, or to roll your own. Here is a basic example with everything included but no room for customization:
import React from "react"; import Drawer, { DrawerContainer, MainContentContainer, } from "react-swipeable-drawer"; import DrawerContent from "./DrawerContent"; import MainContent from "./MainContent"; const App = () => ( <Drawer position="left" size={80}> {({ position, size, swiping, translation, mainContentScroll, toggleDrawer, handleTouchStart, handleTouchMove, handleTouchEnd, }) => ( <div> <DrawerContainer position={position} size={size} swiping={swiping} translation={translation} toggleDrawer={toggleDrawer} handleTouchStart={handleTouchStart} handleTouchMove={handleTouchMove} handleTouchEnd={handleTouchEnd} drawerContent={<DrawerContent />} /> <MainContentContainer translation={translation} mainContentScroll={mainContentScroll} > <MainContent /> </MainContentContainer> </div> )} </Drawer> ); export default App;
Alternatively, you can look at the code for <DrawerOverlay />
and <DrawerContentContainer />
and copy/paste it in place of <DrawerContainer />
to make your own customizations. Same thing for <MainContentContainer />
.
Props
Drawer
size
(integer): size (width or height) in percent (%) of the drawerposition
(string): one ofleft
,right
,top
orbottom
DrawerContainer
<DrawerContainer />
requires all the props passed down by the <Drawer />
render function. It also accepts two optionnal props:
overlayStyle
(object): overrides the<DrawerOverlay />
stylecontentStyle
(object): overrides the<DrawerContentContainer />
style
Known limitations
Due to the fact that Safari on iOS interprets a swipe from the left as a navigation to the previous page, you will not be able to swipe the drawer open. The toggleDrawer
function should still work though.
Other Solutions
Contributors
Thanks goes to these people (emoji key):
Damien Varron | Oscar Martinez |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!
Many thanks also to Kent C. Dodds from whom I stole the template for this repo and the build process.
LICENSE
MIT