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 and prop-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 drawer
• position (string): one of left, right, top or bottom

DrawerContainer

<DrawerContainer /> requires all the props passed down by the <Drawer /> render function. It also accepts two optionnal props:

• overlayStyle (object): overrides the <DrawerOverlay /> style
• contentStyle (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

• react-motion-drawer
• react-drawer
• react-md navigation-drawers

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