echoulen/react-pull-to-refresh

React pull To refresh

Hi there 👋, I'm Carlos Li

• 🔭 I’m currently working on NextDrive
• 🤔 I’m looking for help with PS5 buying (done 🎉)
• ♠️ Mainly use Kotlin (Springboot) > Dart (Flutter ) > Typescript (React > Vue > Nest js)

react-pull-to-refresh's Issues

Remove Arrow Icon in PullDownContent and ReleaseContent

Hi, I want to remove arrow icon in PullDownContent and ReleaseContent component. Can I create PR?

I think maybe the correction will be like this

interface PullDownContentProps {
  height?: string
  background?: any
  label?: string
  disabled?: boolean
}

export const ReleaseContent: React.SFC<ReleaseContentProps> = ({
  height = '200px',
  background = 'none',
  label = 'Release to refresh'
  disabled = false
}) => (
  <div id="container">
    {disabled ? null : <div id="arrow"/>}
    <span>{label}</span>
  </div>
)

Pull to refresh area size

Hi,

For now, the area to trigger onRefresh callback has only 40px (PullToRefresh.js;71). I think it should be parameterized, to allow bigger draggable area. Can you add that possibility?

Thank you.

The containers have set height: 'auto' with no way to override

The two containers that are rendered in default state have their height property set to 'auto' which causes issues in display on children components.
IMO, there should be a way to override that property as well. Like, in my case I need it as '100%'.

onRefresh is not fired

I followed up example but my onRefresh function is not fired, I just used onRefresh={this.onRefresh}

React 18.0.0 typescript

I just updated to react 18. And from the docs it says that children prop need to be explicitly defined when listing props. I got the error below:

Type '{ children: (ReactNode | Element)[]; pullDownContent: Element; releaseContent: Element; refreshContent: Element; pullDownThreshold: number; onRefresh: () => Promise<...>; triggerHeight: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.ts(2322)

Use React.FC instead of React.SFC due to removal in React v18

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-js-pull-to-refresh/dist/src/components/PullDownContent.d.ts b/node_modules/react-js-pull-to-refresh/dist/src/components/PullDownContent.d.ts
index 5921dc8..28d6767 100644
--- a/node_modules/react-js-pull-to-refresh/dist/src/components/PullDownContent.d.ts
+++ b/node_modules/react-js-pull-to-refresh/dist/src/components/PullDownContent.d.ts
@@ -4,4 +4,4 @@ export interface PullDownContentProps {
     background?: any;
     label?: string;
 }
-export declare const PullDownContent: React.SFC<PullDownContentProps>;
+export declare const PullDownContent: React.FC<PullDownContentProps>;
diff --git a/node_modules/react-js-pull-to-refresh/dist/src/components/RefreshContent.d.ts b/node_modules/react-js-pull-to-refresh/dist/src/components/RefreshContent.d.ts
index c7e1b03..edf61b1 100644
--- a/node_modules/react-js-pull-to-refresh/dist/src/components/RefreshContent.d.ts
+++ b/node_modules/react-js-pull-to-refresh/dist/src/components/RefreshContent.d.ts
@@ -3,4 +3,4 @@ export interface RefreshContentProps {
     height?: string;
     background?: any;
 }
-export declare const RefreshContent: React.SFC<RefreshContentProps>;
+export declare const RefreshContent: React.FC<RefreshContentProps>;
diff --git a/node_modules/react-js-pull-to-refresh/dist/src/components/ReleaseContent.d.ts b/node_modules/react-js-pull-to-refresh/dist/src/components/ReleaseContent.d.ts
index 8310fbd..5c928a6 100644
--- a/node_modules/react-js-pull-to-refresh/dist/src/components/ReleaseContent.d.ts
+++ b/node_modules/react-js-pull-to-refresh/dist/src/components/ReleaseContent.d.ts
@@ -4,4 +4,4 @@ export interface ReleaseContentProps {
     background?: any;
     label?: string;
 }
-export declare const ReleaseContent: React.SFC<ReleaseContentProps>;
+export declare const ReleaseContent: React.FC<ReleaseContentProps>;

This issue body was partially generated by patch-package.

---

the above diff is for the dist/, but the solution should be a matter of just find-replacing React.SFC with React.FC.

Hardcoded backgroundColor should not be obligatory or at least be customizable

react-pull-to-refresh/src/components/PullToRefresh.tsx

Line 187 in 90eee3f

backgroundColor: "white",

This div's background color is unnecessary hardcoded and affects inner divs. There is no need to demand white background of the divs in the menu. It should not be there.

Support React Lower version ?

I tried a demo, Its works, but It didnt call onRefresh function when I add this module to my project used react 15.6.2. I wonder because of the version of React, Does this module support React and ReactDOM 15.6.2 :(

Initiate pull to refresh only when list top is reached.

The pull to refresh is initiated whenever user scrolls on the triggerHeight even when the user has not reached at the top of the list. Please suggest some way to initiate the pull to refresh only when the user has reached at the top of the list. In my case the scroll element is <body> itself.

console error when scroll

Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
PullToRefresh.onTouchMove @ PullToRefresh.js:144

Remove console.log in PullToRefresh.tsx