stoeffel/react-motion-drawer

Drawer built with react-motion

ARCHIVED because I didn't have time nor use for this for a long time.

I'd be happy to transfer ownership if someone is interested.

react-motion-drawer

Example | Usage | API | Changelog

Navigation drawer built with the awesome react-motion by @chenglou and react-hammerjs by @JedWatson

Example

A live demo is available here!

To run the example locally, run:

$ yarn
$ yarn serve

Installation

Via npm:

npm install react-motion-drawer

Usage

import Drawer from 'react-motion-drawer';

  <Drawer open={false} onChange={onChange}>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Settings</li>
    </ul>
  </Drawer>

If you want the drawer on the right side of the screen you need the following css.

  body {
    overflow: hidden;
  }

Hooking into the animation

You can hook into the animation by passing a function as the child component.

  <Drawer open={false} width={300} onChange={onChange}>
    { val =>
      <ul style={{ opacity: 300 / val }}>
        <li>Home</li>
        <li>About</li>
        <li>Settings</li>
      </ul>
    }
  </Drawer>

API

Props

Prop Name	type	default	description
zIndex	number	10000	z-index of the drawer
noTouchOpen	bool	false	can a user pan to open
noTouchClose	bool	false	can a user pan to close
onChange	func	() => {}	called when the drawer is open
drawerStyle	object	null	additional drawer styles
className	object	null	additional drawer className
overlayClassName	object	null	additional overlay className
config	object	null	configuration of the react-motion animation
open	bool	false	states if the drawer is open
width	number	300	width of the drawer
height	number	100%	height of the drawer
handleWidth	number	20	width of the handle
peakingWidth	number	50	width that the drawer peaks on press
panTolerance	number	50	tolerance until the drawer starts to move
right	bool	false	drawer on the right side of the screen
overlayColor	string	'rgba(0, 0, 0, 0.4)'	color of the overlay
fadeOut	bool	false	fade out
offset	number	0	offset of the drawer

License

MIT © Christoph Hermann

react-motion-drawer's Issues

Drawer not showing

I am having the following layout:

<div>
  <Header />
	<div style={styles.layout}>
		<Drawer open={true} onChange={onChange} fadeOut right>
			<ul>
				<li>Home</li>
				<li>About</li>
				<li>Settings</li>
			</ul>
		</Drawer>
		{this.props.children}
	</div>
</div>

Am I doing something wrong?

Bottom Drawer

Just wondering if there were any plans on allowing the drawer to open from the bottom?

Option to reset scroll position (to top) after close

This would be a nice option. I'm not sure how to do it manually.

Consider adding types for TypeScript

Hi! I just made a small app that required a drawer navigation like this and I was blown away by it, so good job and thanks! 😄 One thing I noticed is that this project doesn't have any typescript definitions (not here or at definitely typed, the repo for adding types in general). Are you open to support TypeScript? I can help writing the definition file if you want, I'm using my own version for now but I bet it can help other people too. If you don't want to support it, no worries! But if you don't want to, do you mind me creating a definition for this project at definitely typed?

Again, thanks!

Cheers,
Cedric

Overflow issue

I am using react-motion-drawer on the right side. I've already added overflow:hidden on body but overflow still be seen. Any idea about this? (Problem occurred when i test iPhone's Safari. Anything works good when using it on desktop)

Is there a way to stop mouse drag on drawer?

When I use mouse drag on the drawer, it will be moving with my mouse cursor. This behaviour is conflict with one of my component inside the drawer? Is there a way to disable this feather on drawer?

Responsive width?

Seems like width: number limits it to pixel sizes.

Right now it requires using something like the react-measure package or some js to grab the window width in order to calculate a width.

Relative widths would be a useful feature to have. Any idea why only numbers were allowed to begin with?

Menu isnt interactive until several seconds after open

After I swipe open the menu, and click a menu item, i often time have to tap multiple times before it registers unless I wait for several seconds after swiping the menu open

more props

• position
• styles
• draggable (open, close)

Should not bind in render

Functions bound in render get recreated during each render. Could pose a performance problem.

https://ryanfunduk.com/articles/never-bind-in-render/

Spring config is not correct

The latest spring config is an object with damping, stiffness, and precision keys. Currently we are passing an array as the config.

The PropType needs to be updated, as well as the default values.

I keep getting "babel is not a recognized as an internal or external command " at npm run build

I wanted to build this and host it in order to test on mobile browsers, however i keep getting the following error babel is not a recognized as an internal or external command. or do you have a hosted demo?

Probably a bug?

I don't understand this line:
https://github.com/stoeffel/react-motion-drawer/blob/master/lib/drawer.jsx#L143

const { width } = this.calculateWidth()

Since this.calculateWidth() returns number | string
https://github.com/stoeffel/react-motion-drawer/blob/master/lib/drawer.jsx#L170-L175

calculateWidth = () => {
  const width = this.props.width;
  return /\D/.test(width)
    ? document.body.clientWidth * (width.match(/\d*/) / 100)
    : width;
};

How it works? It works?

How to change pan velocity

In the demo, when the drawer is open, one can drag the drawer both left and right. How can I change the drag velocity so that it drags somewhat faster?

I can drag drawer anywhere on the screen.

I can drag the drawer anywhere on the screen. Is this wanted behavior? Seems like we should only be able to drag it to open and close, not drag it anywhere on the screen.

Props in README.md should be in a table

Would be easier to look at and parse through!

Do you have a plan to upgrade to React v15.*

I realy love this component, but now It doesnt work with react v15.0.2 (and react-motion v0.4.4). Do you have a plan to upgrade ?

Looking for new Maintainer

let me know if you're interested in maintaining this repo!

Setting width in the API doesn't work serverside

The following code:

import MotionDrawer from 'react-motion-drawer';
<MotionDrawer
          open={open}
          width="100%"
          zIndex={10}
          onChange={handleChange}
>
  // content    
</MotionDrawer>

will throw the following error when using the library serverside:

ReferenceError: document is not defined
    at Drawer._this.calculateWidth (node_modules/react-motion-drawer/drawer.js:132:34)

This happens because in drawer.js:132:34 there's no document when you're not clientside.

_this.calculateWidth = function () {
      var width = _this.props.width;
      return (/\D/.test(width) ? document.body.clientWidth * (width.match(/\d*/) / 100) : width
      );
}

I saw that a similar error was already fixed so it would be nice if this one could be also fixed. Thanks in advance!

Vertical is deprecated, please use `direction` instead

Seems like there's a deprecated property/method being used in Hammer.

React markup reuse warning

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) z-index:10000;width:122.69999999999999px
(server) z-index:10000;width:30%;padding-right:10

The calculation to width is probably causing this issue in apps with server-side rendering. Then again, this might be evidence of other issues in my project. Further testing needed.

Pin or dock the drawer (for larger screens)

It would be great if there was a built-in capability for the user to pin/dock the drawer in place so it's always open, particularly on larger screens.

overlayClassName prop does not work for me

[QUESTION]: How can i change the default settings of drawer?

I want the drawer to start from a specific point on top. How can i change the top value in the default settings?

Something like this

add example for hooking into the react-motion interpolation

<Drawer>
  {(val) => <NavContent style={{opacity:val}} />}
</Drawer>

Enable user-select when noTouchOpen/noTouchClose

I'm creating a different behaviour to mobile/desk in my app.
When it's on desktop, I disable touchs with noTouchOpen and noTouchClose, but I cannot add user-select: auto because internal drawer styles overrides any style in drawerStyle prop

Couldn't find package "1-liners@^0.4.0" required by "react-motion-drawer"

I am trying to install react-motion-drawer in my react app as:

yarn add react-motion-drawer

Then, its throwing following error:

yarn add v1.21.1 [1/4] Resolving packages... error Couldn't find package "1-liners@^0.4.0" required by "react-motion-drawer" on the "npm" registry. info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this comm and.

Click event bubbles through overlay

If there is a button or component with onClick under the overlay, tapping on it with the drawer open will both close the drawer & fire the click event. This causes unexpected behavior, especially if the click event involves a link or a window.location change.

Updates: This happens only on mobile chrome (default for most android phones) and in the chrome browser when emulating a device using the developer tools.

On an iPad, drawer can still be dragged horizontally out of place with a diagonal swipe even with noTouchOpen/Close = true

The content of our drawer extends off the screen on the iPad so the user needs to swipe up and down to scroll around to everything. If you swipe diagonally, even with noTouchOpen and noTouchClose = true, the drawer drags horizontally and then it stays displaced with stuff slightly off the screen. If you don't realize how it happened and you continue to swipe up and down, the drawer stays horizontally displaced and you can see part of the content.

Any way to turn off the horizontal movement of the drawer entirely except for the actual open and close?

Thanks! This is an awesome control and we sure appreciate it!

Padding on Right of Drawer While Open

Description

Hey there, I've trying out this library and I think I've encountered an issue that there isn't an easy workaround for. I've noticed with a left drawer that when I try to open the drawer by clicking near the right edge of the screen, nothing happens.

Repro:

You can see it in the demo. If you open the chrome inspector and inspect the container for the drawer, you'll see that the padding-right: 20px style is still applied while the drawer is closed. This appears to be the culprit, as when I remove it, the entire click area of the trigger area works.

Is there a prop that I could use to modify the styles on that container? Alternatively, would it be possible to remove that padding when the drawer is closed? Changing the pointer-events might also do it, though I'm not sure how that would interact with the pan handler.

Prevent click and scroll underneath drawer

Clicks on the grayed-out overlay generate click events in the component behind the drawer.

You can also scroll the content behind the drawer. (I think in most cases that's not desirable).

how to apply 'react-motion-drawer' npm for swipeup or swipedown gestures?

You Npm looks great. I want to implement for Swipeup and swipe down gestures.
Can you please tell us, how to implement for above gestures?

Thanks in Advance.

tical

Overlay with default color/opacity does not show on safari OSX

Overlay does not darken the screen using default style. Probably an unsupported css feature or value.

Next steps

Is this component where we want it to be?

What are the next steps to take?

Do we have a roadmap for features, or is it in maintenance mode?

Aside from bugfixes, what is left for us to do? What can we do to make this component more used/useful?

readme

Is it possible to get out the current open status?

I have tried with onChange, but I only want a notification when it is closed.
Thanks

`npm run serve` gives `Cannot GET /``

Hi-
This looks interesting! Tried to run example, but can't figure out the path. Getting a 404 (served from Express) at /. http://localhost:3000/static/bundle.js returns the bundled JS.
Thanks,
Jeff

As a newb in React I have been told to not involve jquery. you seem to use, why?

gh-page