Skip to content

Release Notes - Version 4.0.0
Compare
Choose a tag to compare
@SMAKSS SMAKSS released this 31 Dec 20:26
· 14 commits to master since this release
v4.0.0
286f4b1
This commit was signed with the committer’s verified signature.
SMAKSS Max Kazemi
GPG key ID: DBC2B23A042BE2F8
Learn about vigilant mode.

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/react-scroll-direction@4.0.0
# or
yarn add @smakss/react-scroll-direction@4.0.0

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!

Assets 2