react-intersection-observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport. (by thebuilder)
use-local-storage-state
React hook that persists data in localStorage (by astoilkov)
Our great sponsors
| react-intersection-observer | use-local-storage-state | |
|---|---|---|
| 9 | 8 | |
| 4,779 | 1,055 | |
| - | - | |
| 7.4 | 7.2 | |
| 9 days ago | 9 days ago | |
| TypeScript | TypeScript | |
| MIT License | MIT License |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-intersection-observer
Posts with mentions or reviews of react-intersection-observer.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2022-05-11.
-
React scroll animations with Framer Motion
Alternatively, we can use a library that is designed to handle this functionality. This is the approach that we’ll follow in this article. We’ll be using the react-intersection-observer library, which is a React implementation of the intersection observer API. This library provides Hooks and render props that make it easy to track the scroll position of elements on the viewport.
-
Lazy loading react components with dynamic imports and intersection observer
I'm going to be using react-intersection-observer library, which uses native IntersectionObserver underneath and gives us neat hooks for ease of use.
-
React Visibility - Detect when an element is becoming visible or hidden on the page.
There is no way you didn't see this package before building your own : https://github.com/thebuilder/react-intersection-observer
-
Load API content as elements become visible to users in React
TL;DR; You can reduce the number of queries you make on listing pages by loading content as it gets displayed. Use react-intersection-observer to detect when an element becomes visible and react-content-loader to display a contentful placeholder loader.
-
Load API content progressively as elements become visible to users
I eventually ended up combining react-intersection-observer and react-content-loader to create a progressive loading experience where elements get loaded as they become visible to users.
use-local-storage-state
Posts with mentions or reviews of use-local-storage-state.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2022-11-09.
-
My ingenious library failed but my simple one reached 2m downloads
TL;DR; Today I saw my simple library use-local-storage-state has reached 2 million total downloads while my other ingenious* library main-thread-scheduling has only 8k. I explore why because: 1) it's curious, 2) I want to maximize my value in the open-source community by not making the same mistake twice.
-
My open-source principles
No bloat. I am inspired by Sindre Sorhus. I aim to create small and focused modules. I commonly decline feature requests and propose an alternative ad-hoc solution to the user. When the request is valid and can't be implemented outside the library, I usually refactor enough so the bundle size remains almost the same. Take a look at the history of use-local-storage-state through the last versions. The size got smaller! If the feature is too big, I may consider splitting the problems into two repos.
- Anyone can help me with localStorage stuff for a JavaScript E-commerce project please ? :)
-
One year ago, I created a small library that just hit 10k downloads per week
Do you mean what the library does or what is the library? It's a library for handling localStorage in React, and for the link — https://github.com/astoilkov/use-local-storage-state.
This looks a lot like one of the issues I have in the library — https://github.com/astoilkov/use-local-storage-state/issues/24.
use-local-storage-state
-
React Hooks Factories
use-local-storage-state - the prime example that inspired me to write this blog post.
What are some alternatives?
When comparing react-intersection-observer and use-local-storage-state you can also consider the following projects:
SWR - React Hooks for Data Fetching
react-cool-inview - 😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
dynamic-import-with-intersection-observer - Lazy loading react components with dynamic imports and intersection observer
react-awesome-reveal - React components to add reveal animations using the Intersection Observer API and CSS Animations.
svelte-inview - A Svelte action that monitors an element enters or leaves the viewport.🔥
r3f-perf - Easily monitor your ThreeJS performances.
react-transition-group - An easy way to perform animations when a React component enters or leaves the DOM
react-in-viewport - Detect if React component is in viewport
react-content-loader - ⚪ SVG-Powered component to easily create skeleton loadings.
reactjs-visibility - Detect when an element is becoming visible or hidden on the page.
use-onclickoutside - React hook for listening for clicks outside of an element.
use-local-storage-state vs SWR
react-intersection-observer vs react-cool-inview
react-intersection-observer vs dynamic-import-with-intersection-observer
react-intersection-observer vs react-awesome-reveal
react-intersection-observer vs svelte-inview
react-intersection-observer vs r3f-perf
react-intersection-observer vs react-transition-group
react-intersection-observer vs react-in-viewport
react-intersection-observer vs react-content-loader
react-intersection-observer vs reactjs-visibility
use-local-storage-state vs react-cool-inview
use-local-storage-state vs use-onclickoutside