Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-pannable
Advanced tools
Simulate pan gesture and scroll view for touch devices with [`React`](https://facebook.github.io/react/)
Simulate pan gesture and scroll view for touch devices with React
Install react-pannable
using npm.
npm install --save react-pannable
Some Pannable
demos
Some Pad
demos
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,
};
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
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,
};
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 |
Sets the offset from the content view’s origin.
Scrolls a specific area of the content so that it is visible.
GeneralContent
automatically adjusts the size of content.
type Size = { width: number, height: number };
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) => void |
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,
x: number,
y: number,
width: number,
height: number,
};
Property | Type | DefaultValue | Description |
---|---|---|---|
direction | 'vertical','horizontal' | 'vertical' | The direction of 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. |
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 |
Returns the area of item at the specified indexes.
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,
x: number,
y: number,
width: number,
height: number,
Item: ItemContent,
};
Property | Type | DefaultValue | Description |
---|---|---|---|
direction | 'vertical','horizontal' | 'vertical' | The direction of the list. |
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. |
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 |
Returns the area of item at the specified index.
ItemContent
adjusts the size of content by hash property.
type Size = { width: number, height: number };
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. |
hash | string | 'Item' | 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 |
FAQs
Flexible and Customizable Layouts for Scrolling Content with React
The npm package react-pannable receives a total of 70 weekly downloads. As such, react-pannable popularity was classified as not popular.
We found that react-pannable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.