Package Exports

react-pannable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pannable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-pannable

Simulate pan gesture and scroll view for touch devices with React

npm license

Getting started

Install react-pannable using npm.

npm install --save react-pannable

Examples

All the examples!

Some Pannable demos

Some Pad demos

API Reference

Pannable

Pannable provides a pan gesture simulation on recent mobile browsers for iOS and Android. It can also be used on mouse-base devices across on all evergreen browsers.

type Point = { x: number, y: number };
type PanEvent = {
  translation: Point,
  velocity: Point,
  target: HTMLElement,
};

Prop Types

Property	Type	DefaultValue	Description
enabled	boolean	true	Indicate whether the gesture listener is enabled. If you change this property to `false` while the gesture is listening, the gesture transitions to `cancel`.
shouldStart	boolean,function	true	Whether to start gesture listening. : `(evt: PanEvent) => void`
onStart	function	() => {}	Callback invoked when the gesture starts listening.: `(evt: PanEvent) => void`
onMove	function	() => {}	Callback invoked when the gesture moves.: `(evt: PanEvent) => void`
onEnd	function	() => {}	Callback invoked when the gesture ended listening.: `(evt: PanEvent) => void`
onCancel	function	() => {}	Callback invoked when the gesture cancelled.: `(evt: PanEvent) => void`

Pad

Pad provides a scrollable content component on which overflow scrollbars are not natively supported. It also provides paging scroll implementation and multiple content layout mode.

type Point = { x: number, y: number };
type Size = { width: number, height: number };
type PadEvent = {
  contentOffset: Point,
  contentVelocity: Point,
  dragging: boolean,
  decelerating: boolean,
  size: Size,
  contentSize: Size,
};

Prop Types

Property	Type	DefaultValue	Description
children	element,Component	null	Rendered content. Can be a react component class, a render function, or a rendered element.:`(pad: Pad) => element`
width	number	0	The width of the bounding view.
height	number	0	The height of the bounding view.
contentWidth	number	0	The width of the content view.
contentHeight	number	0	The height of the content view.
scrollEnabled	boolean	true	Determines whether scrolling is enabled.
pagingEnabled	boolean	false	Determines whether paging is enabled.
directionalLockEnabled	boolean	false	determines whether scrolling is disabled in a particular direction.
onScroll	function	() => {}	Callback invoked when the content view scrolls.:`({evt: PadEvent}) => void`

Public Methods

scrollTo({ offset: Point, animated: boolean })

Sets the offset from the content view’s origin.

GeneralContent

GeneralContent automatically adjusts the width and height of content.

type Size = { width: number, height: number };

Prop Types

Property	Type	DefaultValue	Description
width	number	-1	The width of the content. If you set this property to `-1`, it shrinks the content's width.
height	number	-1	The height of the content. If you set this property to `-1`, it shrinks the content's height.
onResize	function	() => {}	Callback invoked when the content resize.:`(Size) => element`

License

MIT License