react-pannable

react-pannable

Simulate pan gesture and scroll view for touch devices with React

Getting started

Install react-pannable using npm.

npm install --save react-pannable

Examples

All the examples!

Some Pannable demos

• Draggable Notes
• Adjustable Sticker

Some Pad demos

• Scrollable Content
• Auto Resizing
• Layout with General Content Mode

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 Rect = { x: number, y: number, width: number, height: number };
type Align = 'auto' | 'center' | 'start' | 'end' | 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.

scrollToRect({ rect: Rect, align: Align, animated: boolean })

Scrolls a specific area of the content so that it is visible.

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: Size) => {}

GridContent

GridContent provides grid layout of content.

type Size = { width: number, height: number };
type Rect = { x: number, y: number, width: number, height: number };
type LayoutAttrs = {
  itemIndex: number,
  rowIndex: number,
  columnIndex: number,
  x: number,
  y: number,
  width: number,
  height: number,
};

Prop Types

Property	Type	DefaultValue	Description
direction	'vertical','horizontal'	'vertical'	the direction of the grid.
itemCount	number	0	the number of items.
rowSpacing	number	0	The minimum spacing to use between rows of items in the grid.
columnSpacing	number	0	The minimum spacing to use between columns of items in the grid.
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.
itemWidth	number	0	The width of the item.
itemHeight	number	0	The height of the item.
itemKey	function	attrs => attrs.itemIndex	the key of the specified cell.:(attrs: LayoutAttrs) => string
renderItem	function	() => null	the renderer of the item.:(attrs: LayoutAttrs) => element
visibleRect	Rect	{ x: 0, y: 0, width: 0, height: 0 }	the area of the visible content.
onResize	function	() => {}	Callback invoked when the content resize.:(size: Size) => {}

Public Methods

getItemRect({ itemIndex: number, rowIndex: number, columnIndex: number })

Returns the area of cell at the specified indexes.

License

MIT License