Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bryaneaton13/react-pull-to-refresh
React component for web pull to refresh
https://github.com/bryaneaton13/react-pull-to-refresh
pull-down-refresh pull-to-refresh react reactjs web
Last synced: 29 days ago
JSON representation
React component for web pull to refresh
- Host: GitHub
- URL: https://github.com/bryaneaton13/react-pull-to-refresh
- Owner: bryaneaton13
- License: mit
- Created: 2015-11-20T00:38:52.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-22T14:11:09.000Z (almost 2 years ago)
- Last Synced: 2024-11-17T16:06:35.009Z (about 1 month ago)
- Topics: pull-down-refresh, pull-to-refresh, react, reactjs, web
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-pull-to-refresh
- Size: 639 KB
- Stars: 476
- Watchers: 8
- Forks: 74
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-pull-to-refresh
`npm install react-pull-to-refresh -S`
A pull to refresh component for the web.
Based on Andy Peatling's [Pull to Refresh for the Web](https://github.com/apeatling/web-pull-to-refresh)
## Usage
Your refresh handler function takes in `resolve` and `reject` to tell the PullToRefresh component when it's finished.
```typescript
async handleRefresh() {
await asyncCode();
}
```
Where you want to render the component:
```typescript
Pull down to refresh
{items}
etc.
```
## CSS
Use the CSS from [the example](https://github.com/bryaneaton13/react-pull-to-refresh/blob/master/playground/app.css) as a starting point.
## All props
```typescript
export interface ReactPullToRefreshProps extends HTMLAttributes {
onRefresh: () => Promise;
icon?: ReactNode;
loading?: ReactNode;
disabled?: boolean;
distanceToRefresh?: number;
resistance?: number;
hammerOptions?: {
cssProps?: CssProps | undefined;
domEvents?: boolean | undefined;
enable?: boolean | ((manager: HammerManager) => boolean) | undefined;
preset?: RecognizerTuple[] | undefined;
touchAction?: string | undefined;
recognizers?: RecognizerTuple[] | undefined;
inputClass?: HammerInput | undefined;
inputTarget?: EventTarget | undefined;
}
```
- **onRefresh**: `() => Promise`
- **icon**: `ReactNode`
- _default:_
```html
```
- **loading**: `ReactNode`
- _default:_
```html
```
- **disabled**: `boolean`
- **className**: `string`
- **style**: `object`
- **distanceToRefresh**: `number`
- _default_: `70`
- **resistance**: `number`
- _default_: `2.5`
- **hammerOptions**: `HammerOptions`
```typescript
interface HammerOptions {
cssProps?: CssProps | undefined;
domEvents?: boolean | undefined;
enable?: boolean | ((manager: HammerManager) => boolean) | undefined;
preset?: RecognizerTuple[] | undefined;
touchAction?: string | undefined;
recognizers?: RecognizerTuple[] | undefined;
inputClass?: HammerInput | undefined;
inputTarget?: EventTarget | undefined;
}
```
## Running the code
1. Checkout the repo
2. Run `npm install`
3. Run `npm run play` to open the code from `/playground`
## Thanks
[Andy Peatling](http://apeatling.com/)