thmsgbrt / react-simple-pull-to-refresh

npm install react-simple-pull-to-refresh

Hey! Nice to see you.

Welcome to my page!
I'm Thomas, Fullstack developer from Lorient, France, currently living in Stockholm, Sweden.

Things I code with

Open source projects

🎁 Projects	⭐ Stars	📚 Forks	🛎 Issues	📬 Pull requests
React PullToRefresh component
Typescript & React Chrome Extension Starter
NodeJs Express TypeScript GraphQL Starter

My latest posts

• Create Your First Ethereum Smart Contract With Remix IDE
  Build a Blockchain-powered chat from your browser!.
• How to Create a Self-Updating README.md for Your GitHub Profile
  A good tutorial to do your first steps with GitHub Actions
• How You Should Structure Your React Applications
  A matter of taste, sure, but here is an approach that scales.
• Pro Tips to Help You Get Started With Your Side Project
  Begin with solid foundations to keep the excitement kicking in...
• How to Take Care of Your Personal Branding as a Programmer
  It’s more than just refreshing your resume
• 7 New Features Shipping With ES2020
  GlobalThis, optional chaining, private fields in classes, the nullish coalescing operator, and more

Välkommen till Stockholm!

Above are the last 3 pictures posted by @visitstockholm!
Currently, the weather is: 15°C, clear sky
Today, the sun rises at 03:31 and sets at 22:03.

Where to find me

---

This README file is generated every 3 hours!
Last refresh: Thursday, 13 June, 20:01 CEST
Create your own here!

react-simple-pull-to-refresh's Issues

fetchMoreTresholdBreached

i think this should be a useRef ,

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

Line 43 in b91b3ef

let pullToRefreshThresholdBreached: boolean = false;

because when dragging is happening, something like loading state would change the children props, which will cause this FunctionComponent re-call, then, this fetchMoreTresholdBreached flag would be false again, in tihs situation, here

var onScroll = function (e) {
    /**
         * Check if component has already called onFetchMore
         */
    if (fetchMoreTresholdBreached) return;

it may not work as expected

pull to fresh: css position fixed not working in children elements

The class ptr__children will add style transform: translate(0,0) while the element is not pulling.
And it makes css position: fixed not working in children.
Could it fix to transform: none; when we stop pulling?

Custom color on the loading indicator

I am trying to apply custom styling so that the loading indicator stands out more on my dark background (honestly just trying to make it white). I am having trouble getting css to apply after trying the classNames and style attributes with no luck.

I would love to see this color configurable through a prop likebackgroundColor. The component is working as expected, aside from me not knowing how to set the color, thanks for the awesome work!

After latest release everything is broken

I am still using 1.3.0 yet it is not working for some reason. If you yarn install it will not work any more.

After Upgrade to 1.3.1 getting error that module not found

ModuleNotFoundError
Could not find module in path: 'react-simple-pull-to-refresh' relative to '/src/App.js'

Cannot use in [email protected]

I am starting a new project, and want to use this in my project. but seems not available in [email protected]

Bug Found !!

I found this this issue when i was working with dropdown in react , when i open the dropdown and select any option and move cursor any where down , it refresh the page .

onSrolll: null is not an object (evaluating 'P.current.classList')

The following line is throwing an error due to containerRef.current being null.

react-simple-pull-to-refresh/build/index.esm.js in onScroll at line 258:26

/**
 * Check if user breached fetchMoreThreshold
 */
    if (canFetchMore && getScrollToBottomValue() < fetchMoreThreshold && onFetchMore) {
            fetchMoreTresholdBreached = true;
            containerRef.current.classList.add('ptr--fetch-more-treshold-breached'); <---- This line is throwing the error
            onFetchMore().then(initContainer).catch(initContainer);
        }
    };

This can be triggered by the component getting unmounted during a scroll event.

Cannot read properties of undefined (reading 'then')

<PullToRefresh onRefresh={() => console.log('aaa')}>
	<ul>
		{list.map((item, index) => (
			<li key={index}>{item}</li>
		))}
	</ul>
</PullToRefresh>;

Version: "react-simple-pull-to-refresh": "^1.3.3",
React: "react": "^17.0.2"

Each time I scroll down I get the following error ("Uncaught TypeError: Cannot read properties of undefined (reading 'then') at HTMLDivElement.onEnd (index.esm.js:280:1)").

Perhaps I'm doing something wrong. Thanks!

container onScroll listen

here is listening to the window scroll event, but what if the scroll area is a div not the window, it seems won't be able to work , especially onFetchMore . so... i am getting stuck in this issue

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

Line 56 in b91b3ef

window.addEventListener('scroll', onScroll);

z-index of children issue

Hey, great package! This z-index is problematic because it is a global style. It puts the children in the pull to refresh above other stuff on the page (if the other stuff has zindex < 1) Is this needed?

line:

react-simple-pull-to-refresh/src/styles/main.scss

Line 8 in 7534484

z-index: 1;

How to stop loading behavior

I can't stop loading action, I think that the loadmore event should not be called when there is a load event in progress.

containerRef.current is null when change router

Reproduce steps:

1. open https://codesandbox.io/s/ptr-error-bc70w
2. click photo link
3. click video link on photo page, return video page
4. scroll then error

Thanks for you job. :)

[Question] The loading always here when I am pull

How to hide it. In my opinion, the onRefresh should be a function that return a promise. When the promise resolved or rejected. The loading hide itself.

Pull conflicts with overscroll animation on iPhone Safari

Please see the recording. Safari has overscroll effect that combines with pull-to-refresh transform-translate.

This is how it works now

This is how it is supposed to work (I made a fix)

Whats this area at the bottom and how can I remove this ?

Prop I have passed

  canFetchMore={false}
  pullDownThreshold={120}
  maxPullDownDistance={150}
  pullingContent=""
  refreshingContent={loader animation component}
  onRefresh= function

help me fix this issue. I cannot find where this white space is coming from.

Enable event listeners like onScroll or add a callback for onPull

This is more of a feature request, but would love the ability to know if the user began the pull. I have a list of intractable items (both tap and long press events) and if the user begins pulling down it doesn't stop the event from propagating down, or rather up I guess, the touch down on my list element gets responded too before the pull to refresh can full complete resulting in it getting cancelled because my app changes state based on the item tapped.
Currently I'm bubbling those events up to the parent and having it handle it, and I'm forced to use the Ionic framework instead because it gives me an onPull event where I can see if the user was attempting a pull-to-refresh and then basically cancel the select event if you will on the underlying element.
But I like the lighter weight of yours, I just can't figure out a way to make it work with my clients designs. They very much want a UITableView like experience in a native iOS app essentially.

Bounce when flicked to the top

I noticed the pull to refresh only works if the element is already at the top of the page. I want it to activate even if I start halfway down the page and quickly scroll up. Is there a way to achieve this?

pullingContent get default content sometimes

I changed pullingContent="" but still sometimes got text "pull to refresh" showing in mobile webview?.
How can I fix it?

Don't work if `height: 100vh`

Don't work if i want on mobile do:

body,
#app {
  height: 100vh;
  width: 100vw;
}

Animation doesnt deactivate

When I "Pull to Refresh" and no data comes in, the animation continues to load, even after isPullable becomes false. How I tell the component to stop the loading animation and pull back up?

Allow to load css from the project it self

First of all thank you for this awesome lib! 🙏🏼

Currently, the css is bundled with js, and injected at runtime with some magic injectStyles function.

In my project I want to process all the css with my custom loaders (postcss rtl, autoprefixer, etc), is it possible to allow importing the styles as a separate import, similar to what react-toastify allows (it's just adds the css file to the build folder)

undefined is not an object (evaluating 'f().then')

First of all thank you for this awesome library!

Been using this library but currently experiencing this error on-refresh seems to be a error tied to sentry, tried updating sentry dependencies but no luck.

The `window.scrollY` is a problems!

your code

const getScrollToBottomValue = (): number => {
   if (!childrenRef || !childrenRef.current) return -1;
   const scrollTop = window.scrollY; // is the pixels hidden in top due to the scroll. With no scroll its value is 0.
   const scrollHeight = childrenRef.current.scrollHeight; // is the pixels of the whole container
   return scrollHeight - scrollTop - window.innerHeight;
 };

The window.scrollY ！It is limited to being used only in the window. If a scroll bar appears at a maximum height on its outer layer, it will not work