react-scroll-direction

We are excited to announce the release of @smakss/react-scroll-direction version 4.1.0. This version brings several improvements and bug fixes that enhance the functionality and usability of our React scroll direction detection hook.

What's New

• Improvements:

  • Enhanced the scroll position detection accuracy, especially near page boundaries.
  • Updated documentation with more examples and use cases to help developers integrate the hook into their projects more easily.

• Bug Fixes:

  • Fixed an issue where the scroll direction incorrectly reported as "down" when scrolling the page.

Acknowledgments

A big thank you to @astralarya, @KubaZachacz and the community for their continuous support and feedback, which have been invaluable in making this release possible.

What's Changed

• Fix/258 scolldir is always down by @SMAKSS in https://github.com/SMAKSS/react-scroll-direction/pull/266

Full Changelog: https://github.com/SMAKSS/react-scroll-direction/compare/v4.0.4...v4.1.0

Full Changelog: https://github.com/SMAKSS/react-scroll-direction/compare/v4.0.3...v4.0.4-beta.0

Highlights of Version 4.0.0

We are excited to announce the release of version 4.0.0 of the @smakss/react-scroll-direction hook. This major update brings significant enhancements to the hook, introducing the ability to detect not only the scroll direction but also the precise scroll position within the viewport. This feature is essential for developers looking to create more dynamic and responsive UI interactions in their React applications.

New Features

• Scroll Position Detection: Alongside detecting the scroll direction (up, down, left, right, still), the hook now provides the exact scroll position from the top, bottom, left, and right edges of the viewport. This addition opens up a new realm of possibilities for scroll-based animations and interactions in your application.
• Enhanced TypeScript Support: Improved type definitions for better integration with TypeScript projects.
• Extended Compatibility: Ensures seamless integration with popular frameworks and libraries such as Remix, Next.js, and Gatsby.

Updated API

• The hook now returns an object containing two properties: scrollDir and scrollPosition. scrollDir gives the direction of the scroll, while scrollPosition provides an object with top, bottom, left, and right properties, indicating the scroll distance from respective edges of the viewport.

Breaking Changes

• Starting from this version, CommonJS support has been discontinued. The package now only supports ES Module imports. This change is part of our effort to streamline the package and embrace modern JavaScript standards.
• Please note that the return type of the hook has been modified to accommodate the new feature. Ensure to update your implementation to work with the new return type structure.

How to Upgrade

To upgrade to the latest version, run:

npm install @smakss/[email protected]
# or
yarn add @smakss/[email protected]

Example Usage

import useDetectScroll from '@smakss/react-scroll-direction';

function Component() {
  const { scrollDir, scrollPosition } = useDetectScroll();

  // Use scrollDir and scrollPosition as needed
}

Acknowledgements

Special thanks to our contributors and users for their feedback and suggestions that have shaped this release. Your continued support and engagement are invaluable to the growth of this project.

Stay Connected

For more updates, follow us on GitHub and stay tuned for more exciting features!

Fix the dependencies vulnerabilities.

Full Changelog: https://github.com/SMAKSS/react-scroll-direction/compare/v3.1.2...v3.1.3

@smakss/react-scroll-direction v3.1.0 🚀

🆕 Minimum Node.js Requirement

• Node.js v18 Required: To stay on the cutting edge and leverage the latest features, we've updated our minimum Node.js version requirement to v18. This update is crucial for ensuring compatibility and utilising the latest performance improvements. Make sure to upgrade your Node.js environment to continue using our package seamlessly. 📈🌐

🔧 Dependency Upgrades

• Fresher and Cleaner: We've updated our dependencies to the most recent and stable versions. This not only brings the latest features from our dependencies but also addresses potential security vulnerabilities. Keeping your development secure and efficient is our priority. 🛡️🧼

✅ CI Workflow Refinement

• Streamlined Builds: We've refined our Continuous Integration (CI) workflows, fixing the hiccups and ensuring that all our automated tests and builds run as smooth as butter. These enhancements mean faster, more reliable builds for every release. 🏗️💨

🛠️ For Developers

• After pulling the latest development changes, remember to update your Node.js to v18 and synchronise your environment:

nvm install 18
nvm use 18
yarn install

This will make sure you're using the correct Node.js version, and your dependencies are up to date.