JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 83
  • Score
    100M100P100Q67997F
  • License MIT

Simulate pan gesture and scroll view for touch devices with React

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 version 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,
  interval: number,
  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 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 AlignEnum = 'auto' | 'center' | 'start' | 'end' | number;
type Align = { x: AlignEnum, y: AlignEnum } | AlignEnum;
type PadEvent = {
  contentOffset: Point,
  contentVelocity: Point,
  dragging: boolean,
  decelerating: boolean,
  size: Size,
  contentSize: Size,
};

Prop Types

Property Type DefaultValue Description
children element,function null Rendered content. Can be 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 suggested width of the content view.
contentHeight number 0 The suggested 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.
alwaysBounceX boolean true Determines whether bouncing always occurs when horizontal scrolling reaches the end of the content.
alwaysBounceY boolean true Determines whether bouncing always occurs when vertical scrolling reaches the end of the content.
onScroll function () => {} Callback invoked when the content view scrolls.:({evt: PadEvent}) => void
onResize function () => {} Callback invoked when the bounding view resize.:(size: Size) => void
onContentResize function () => {} Callback invoked when the content view resize.:(size: Size) => 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.

AutoResizing

AutoResizing automatically expands the size of the bounding view.

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

Prop Types

Property Type DefaultValue Description
children element,function null The render function passing computed width and height.:(size: Size) => element
width number null The width of the content. If not specified, it expands the width of the bounding view.
height number null The height of the content. If not specified, it expands the height of the bounding view.
onResize function () => {} Callback invoked when the content resize.:(size: Size) => void

GeneralContent

GeneralContent automatically shrinks the size of the content.

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

Prop Types

Property Type DefaultValue Description
width number null The width of the content. If not specified, it shrinks the width of the content.
height number null The height of the content. If not specified, it shrinks the height of the content.
onResize function () => {} Callback invoked when the content resize.:(size: Size) => void

GridContent

GridContent displays data in multiple rows and columns with the same size.

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

Prop Types

Property Type DefaultValue Description
direction 'x','y' 'y' The direction of the grid.
width number 0 The suggested width of the content.
height number 0 The suggested height of the content.
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.
itemCount number 0 The number of items.
itemWidth number 0 The width of the item.
itemHeight number 0 The height of the item.
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) => void

Public Methods

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

Returns the area of item at the specified indexes.

ListContent

ListContent displays data in a single line of customizable items.

type Size = { width: number, height: number };
type Rect = { x: number, y: number, width: number, height: number };
type LayoutAttrs = {
  itemIndex: number,
  rect: Rect,
  visibleRect: Rect,
  Item: ItemContent,
};

Prop Types

Property Type DefaultValue Description
direction 'x','y' 'y' The direction of the list.
width number 0 The suggested width of the content.
height number 0 The suggested height of the content.
spacing number 0 The minimum spacing to use between items in the list.
itemCount number 0 The number of items.
estimatedItemWidth number 0 The estimated width of the item.
estimatedItemHeight number 0 The estimated height of the item.
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) => void

Public Methods

getItemRect({ itemIndex: number })

Returns the area of item at the specified index.

ItemContent

ItemContent fits the size of the content by hash.

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

Prop Types

Property Type DefaultValue Description
width number null The width of the content. If not specified, it shrinks the width of the content.
height number null The width of the content. If not specified, it shrinks the width of the content.
hash string '' The hash of the content. if this property changes, the content size recalculates.
getSizeByHash function () => null The content size getter by hash.:(hash: string) => Size
onResize function () => {} Callback invoked when the content resize.:(size: Size, hash: string) => void

License

MIT License