Implementing Scroller
Writing code for the Scroller library and exporting it for users.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Creating React Libraries from Scratch course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Creating React Libraries from Scratch, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:08] Navigate to the source directory and create a new file called usescroller.js. This is where our usescroller hook will live.
[00:09 - 00:19] Let's start by exporting a function called usescroller. Hooks have a convention of use before the actual name of the hook we're creating.
[00:20 - 00:35] As mentioned in the last lesson, usescroller will take an object that has an x property, a y property, and an is smooth property. Since this is optional, we're going to default this to false.
[00:36 - 01:12] For scroller, we'll be taking a shortcut. We'll be using window.scroller2 to handle the scrolling for us, which is a given function from the browser. In Node.js and especially while unit testing, this value can be undefined. So first, we'll check if window doesn't exist and bail instantly if it doesn't. Otherwise, we're going to return a function called scroller. This will be a callback the user will call later on to make the scroll happen.
[01:13 - 01:36] Inside the scroller function, we'll say window.scroller2 to tell the window to scroll to a certain place. Scroll2 uses left and top instead of x and y. So we'll do that translation here . So our left will be the x property, top will be the y property, and then scroll top has a behavior property.
[01:37 - 01:52] This is a string that's either smooth for the smooth scroll or auto for instance scrolling. We'll check if smooth is true. And if it is, we'll pass in smooth. Otherwise, we'll use the auto property.
[01:53 - 02:05] Save this and our use scroller hook is now complete. Remember the source/index.js file we created in module one.
[02:06 - 02:38] Let's update this to expose scroller in a nicer way. Index files in JavaScript allow imports and exports to use a directory name instead of having to link directly to the file itself. In other words, right now to import scroller, we would need to use import scroller from scroller/usescroller. If we were to export use scroller from inside the index.js file, we would be able to remove the use scroller directly to the file and import directly from scroller itself.
[02:39 - 02:51] This concept is similar to an init.py file in Python. Let's update the index.js file to export our file directly. So here we'll export use scroller from use scroller.