1 | <div align="center">
|
2 | <h1>react-swipeable-drawer</h1>
|
3 |
|
4 | <strong>A swipeable drawer for the mobile web</strong>
|
5 | </div>
|
6 |
|
7 | <hr />
|
8 |
|
9 | [![Build Status][build-badge]][build]
|
10 | [![Code Coverage][coverage-badge]][coverage]
|
11 | [![Greenkeeper badge][greenkeeper-badge]](https://greenkeeper.io/)
|
12 | [![downloads][downloads-badge]][npmcharts]
|
13 | [![version][version-badge]][package]
|
14 | [![MIT License][license-badge]][LICENSE]
|
15 |
|
16 | [![All Contributors][contributors-badge]](#contributors)
|
17 | [![PRs Welcome][prs-badge]][prs]
|
18 | [![Code of Conduct][coc-badge]][coc]
|
19 |
|
20 | [![size][size-badge]][unpkg-dist]
|
21 | [![gzip size][gzip-badge]][unpkg-dist]
|
22 | [![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]
|
23 |
|
24 | [![Watch on GitHub][github-watch-badge]][github-watch]
|
25 | [![Star on GitHub][github-star-badge]][github-star]
|
26 | [![Tweet][twitter-badge]][twitter]
|
27 |
|
28 | ## The problem
|
29 |
|
30 | Every time I see a hamburger menu and a drawer, I try to swipe it open.
|
31 |
|
32 | ## This solution
|
33 |
|
34 | A tiny react library, with no dependencies, that relies mostly on css transforms.
|
35 |
|
36 | ![demo](./other/demo.gif)
|
37 |
|
38 | ## Installation
|
39 |
|
40 | This module is distributed via [npm][npm] which is bundled with [node][node] and
|
41 | should be installed as one of your project's `dependencies`:
|
42 |
|
43 | ```
|
44 | npm install --save react-swipeable-drawer
|
45 | ```
|
46 |
|
47 | > This package also depends on `react` and `prop-types`. Please make sure you have
|
48 | > those installed as well.
|
49 |
|
50 | ## Usage
|
51 |
|
52 | See the complete [example](./examples).
|
53 |
|
54 | `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:
|
55 |
|
56 | ```jsx
|
57 | import React from "react";
|
58 |
|
59 | import Drawer, {
|
60 | DrawerContainer,
|
61 | MainContentContainer,
|
62 | } from "react-swipeable-drawer";
|
63 |
|
64 | import DrawerContent from "./DrawerContent";
|
65 | import MainContent from "./MainContent";
|
66 |
|
67 | const App = () => (
|
68 | <Drawer position="left" size={80}>
|
69 | {({
|
70 | position,
|
71 | size,
|
72 | swiping,
|
73 | translation,
|
74 | mainContentScroll,
|
75 | toggleDrawer,
|
76 | handleTouchStart,
|
77 | handleTouchMove,
|
78 | handleTouchEnd,
|
79 | }) => (
|
80 | <div>
|
81 | <DrawerContainer
|
82 | position={position}
|
83 | size={size}
|
84 | swiping={swiping}
|
85 | translation={translation}
|
86 | toggleDrawer={toggleDrawer}
|
87 | handleTouchStart={handleTouchStart}
|
88 | handleTouchMove={handleTouchMove}
|
89 | handleTouchEnd={handleTouchEnd}
|
90 | drawerContent={<DrawerContent />}
|
91 | />
|
92 | <MainContentContainer
|
93 | translation={translation}
|
94 | mainContentScroll={mainContentScroll}
|
95 | >
|
96 | <MainContent />
|
97 | </MainContentContainer>
|
98 | </div>
|
99 | )}
|
100 | </Drawer>
|
101 | );
|
102 |
|
103 | export default App;
|
104 | ```
|
105 |
|
106 | Alternatively, you can look at the code for [`<DrawerOverlay />`](./src/DrawerOverlay.js) and [`<DrawerContentContainer />`](./src/DrawerContentContainer.js) and copy/paste it in place of `<DrawerContainer />` to make your own customizations. Same thing for [`<MainContentContainer />`](./src/MainContentContainer.js).
|
107 |
|
108 | ### Props
|
109 |
|
110 | #### Drawer
|
111 |
|
112 | * `size` (integer): size (width or height) in percent (%) of the drawer
|
113 | * `position` (string): one of `left`, `right`, `top` or `bottom`
|
114 |
|
115 | #### DrawerContainer
|
116 |
|
117 | `<DrawerContainer />` requires all the props passed down by the `<Drawer />` render function. It also accepts two optionnal props:
|
118 |
|
119 | * `overlayStyle` (object): overrides the `<DrawerOverlay />` style
|
120 | * `contentStyle` (object): overrides the `<DrawerContentContainer />` style
|
121 |
|
122 | ## Known limitations
|
123 |
|
124 | 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.
|
125 |
|
126 | ## Other Solutions
|
127 |
|
128 | * [`react-motion-drawer`](https://github.com/stoeffel/react-motion-drawer)
|
129 | * [`react-drawer`](https://github.com/atom2ueki/react-drawer)
|
130 | * [`react-md navigation-drawers`](https://react-md.mlaursen.com/components/navigation-drawers)
|
131 |
|
132 | ## Contributors
|
133 |
|
134 | Thanks goes to these people ([emoji key][emojis]):
|
135 |
|
136 |
|
137 |
|
138 |
|
139 | | [<img src="https://avatars.githubusercontent.com/u/433409" width="100px;"/><br /><sub><b>Damien Varron</b></sub>](https://github.com/damusnet)<br />[💻](https://github.com/damusnet/react-swipeable-drawer/commits?author=damusnet "Code") [📖](https://github.com/damusnet/react-swipeable-drawer/commits?author=damusnet "Documentation") [🚇](#infra-damusnet "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/damusnet/react-swipeable-drawer/commits?author=damusnet "Tests") [🤔](#ideas-damusnet "Ideas, Planning, & Feedback") [🔧](#tool-damusnet "Tools") | [<img src="https://avatars2.githubusercontent.com/u/2343630?v=4" width="100px;"/><br /><sub><b>Oscar Martinez</b></sub>](http://mtnz-web.com)<br />[💻](https://github.com/damusnet/react-swipeable-drawer/commits?author=ooHmartY "Code") |
|
140 | | :---: | :---: |
|
141 |
|
142 |
|
143 |
|
144 | This project follows the [all-contributors][all-contributors] specification.
|
145 | Contributions of any kind welcome!
|
146 |
|
147 | Many thanks also to [Kent C. Dodds](http://kentcdodds.com/) from whom I stole the template for this repo and the build process.
|
148 |
|
149 | ## LICENSE
|
150 |
|
151 | MIT
|
152 |
|
153 | [npm]: https://www.npmjs.com/
|
154 | [node]: https://nodejs.org
|
155 | [build-badge]: https://img.shields.io/travis/damusnet/react-swipeable-drawer.svg?style=plastic
|
156 | [build]: https://travis-ci.org/damusnet/react-swipeable-drawer
|
157 | [coverage-badge]: https://img.shields.io/codecov/c/github/damusnet/react-swipeable-drawer.svg?style=plastic
|
158 | [coverage]: https://codecov.io/github/damusnet/react-swipeable-drawer
|
159 | [greenkeeper-badge]: https://badges.greenkeeper.io/damusnet/react-swipeable-drawer.svg
|
160 | [version-badge]: https://img.shields.io/npm/v/react-swipeable-drawer.svg?style=plastic
|
161 | [package]: https://www.npmjs.com/package/react-swipeable-drawer
|
162 | [downloads-badge]: https://img.shields.io/npm/dm/react-swipeable-drawer.svg?style=plastic
|
163 | [npmcharts]: http://npmcharts.com/compare/react-swipeable-drawer
|
164 | [license-badge]: https://img.shields.io/npm/l/react-swipeable-drawer.svg?style=plastic
|
165 | [license]: https://github.com/damusnet/react-swipeable-drawer/blob/master/LICENSE
|
166 | [contributors-badge]: https://img.shields.io/badge/all_contributors-1-orange.svg?style=plastic
|
167 | [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=plastic
|
168 | [prs]: http://makeapullrequest.com
|
169 | [donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=plastic
|
170 | [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=plastic
|
171 | [coc]: https://github.com/damusnet/react-swipeable-drawer/blob/master/other/CODE_OF_CONDUCT.md
|
172 | [github-watch-badge]: https://img.shields.io/github/watchers/damusnet/react-swipeable-drawer.svg?style=social
|
173 | [github-watch]: https://github.com/damusnet/react-swipeable-drawer/watchers
|
174 | [github-star-badge]: https://img.shields.io/github/stars/damusnet/react-swipeable-drawer.svg?style=social
|
175 | [github-star]: https://github.com/damusnet/react-swipeable-drawer/stargazers
|
176 | [twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-swipeable-drawer!%20https://github.com/damusnet/react-swipeable-drawer%20%F0%9F%91%8D
|
177 | [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/damusnet/react-swipeable-drawer.svg?style=social
|
178 | [emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
|
179 | [all-contributors]: https://github.com/kentcdodds/all-contributors
|
180 | [gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-swipeable-drawer/dist/react-swipeable-drawer.umd.min.js?compression=gzip&label=gzip%20size&style=plastic
|
181 | [size-badge]: http://img.badgesize.io/https://unpkg.com/react-swipeable-drawer/dist/react-swipeable-drawer.umd.min.js?label=size&style=plastic
|
182 | [unpkg-dist]: https://unpkg.com/react-swipeable-drawer/dist/
|
183 | [module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=plastic
|