react-intersection-observer
use-local-storage-state
Our great sponsors
react-intersection-observer | use-local-storage-state | |
---|---|---|
9 | 8 | |
4,779 | 1,055 | |
- | - | |
7.4 | 7.2 | |
10 days ago | 9 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
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
-
Beautiful UI animation on scroll with React
1. Install react-intersection-observer from Github
-
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 multiple background videos on a page
This would do it for ya if you don't want to implement it yourself https://github.com/thebuilder/react-intersection-observer/blob/master/src/useInView.tsx
-
Scroll reveal with Framer Motion
I'll use React-Interception-Observer to control the screen events you can check the documentation if you wanna know more.
-
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.
-
Create animations like PowerPoint slides in React with framer-motion and react-intersection-observe
*react-intersection-observer *— react implementation of the Intersection Observer API to tell you *when an element enters or leaves the viewport *(from official description). Docs here: https://github.com/thebuilder/react-intersection-observer#readme
-
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
-
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.
-
Better npm search proposal
For example, I just searched for "local storage react hook npm" and it didn't show my own library use-local-storage-state. For context, my library is the most downloaded and most maintained local storage react hook library on npm.
- 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
This looks a lot like one of the issues I have in the library — https://github.com/astoilkov/use-local-storage-state/issues/24.
-
React Hooks Factories
use-local-storage-state - the prime example that inspired me to write this blog post.
What are some alternatives?
react-cool-inview - 😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
SWR - React Hooks for Data Fetching
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.
use-onclickoutside - React hook for listening for clicks outside of an element.
svelte-inview - A Svelte action that monitors an element enters or leaves the viewport.🔥
Material UI - Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
r3f-perf - Easily monitor your ThreeJS performances.
Recoil - Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
react-transition-group - An easy way to perform animations when a React component enters or leaves the DOM
storage - A library to use Web Storage API with Observables