Scroller schema

Describe the implementation of Scroller.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To 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.

This video is available to students only
Unlock This Course

Get unlimited access to Creating React Libraries from Scratch, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Creating React Libraries from Scratch

With our library hosted on GitHub, let's get down to writing code for scroller. There are various ways to consume a React library. We can use plain JavaScript, components, hooks, render props, higher-der components, or HOCs. For the implementation of scroller, we'll be taking advantage of hooks. Hooks are a fairly new addition to React, introduced in version 16.8 that provide an excellent way of sharing logic between functional components. But one of the downsides of using hooks is they cannot be used in components to find using class or class components. The functional components are slowly becoming the popular choice in the React community. Scroller is a hook that will produce a function. In our use as example, we'll have our hook called usescroller that takes some options. An xy field will tell us where to scroll, use our numbers, and require. We'll have an optional is smooth option that tells us if we should move smoothly to a position or instantaneously. In this case, when scroller is called, the scroller will scroll to x position 5 , y position 200, and pixels smoothly.