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
Getting started
Install react-pannable using npm.
npm install --save react-pannableExamples
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 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.