〈 Table of contents 〉

• About
• Installation
• API
• License

〈 About 〉

morphing-scroll is a React is a React library originally created to address common limitations of the native browser scrollbar, including:

• Design customization constraints
• Cross-browser compatibility
• Lack of horizontal scrolling support via mouse wheel

Over time, the library evolved to include numerous optimizations for handling large lists, significantly improving performance and flexibility.

All features are described below through the available components and their corresponding props.

〈 Installation 〉

To install the library, use the following command:

npm install morphing-scroll

Next, import the MorphScroll component into your React application:

import { MorphScroll } from "morphing-scroll";

If you prefer, you can also import the entire library as a single object using the default export:

import Morph from "morphing-scroll";

Start using the MorphScroll component by defining the required size prop. For better precision and control, it's recommended to begin by understanding the objectsSize and progressTrigger props, which are explained below.

✦ Note:
MorphScroll supports both ESM (import) and CommonJS (require) builds.

〈 API 〉

• Props:

— GENERAL SETTINGS —

<MorphScroll {...props} className="custom-class">
  {children}
</MorphScroll>

<MorphScroll {...props}>{children}</MorphScroll>

— SCROLL SETTINGS —

<MorphScroll {...props} type="slider">
  {children}
</MorphScroll>

<MorphScroll {...props} direction="x">
  {children}
</MorphScroll>

<MorphScroll {...props} scrollPosition={100}>
  {children}
</MorphScroll>

<MorphScroll {...props}
  onScrollValue={
    (left, top) => console.log("Scroll position:", left, top),
  }
>
  {children}
</MorphScroll>

<MorphScroll
  {...props}
  isScrolling={(motion) => {
    console.log(motion ? "Scrolling..." : "Scroll stopped.");
  }}
>
  {children}
</MorphScroll>

— VISUAL SETTINGS —

<MorphScroll {...props} size={100}>
  {children}
</MorphScroll>

<MorphScroll {...props} objectsSize={[70, 100]}>
  {children}
</MorphScroll>

<MorphScroll {...props} crossCount={2}>
  {children}
</MorphScroll>

<MorphScroll {...props} gap={10}>
  {children}
</MorphScroll>

<MorphScroll {...props} wrapperMargin={10}>
  {children}
</MorphScroll>

<MorphScroll {...props} wrapperMinSize={"full"}>
  {children}
</MorphScroll>

<MorphScroll {...props} wrapperAlign="center">
  {children}
</MorphScroll>

<MorphScroll {...props} elementsAlign="center">
  {children}
</MorphScroll>

<MorphScroll {...props} elementsDirection="column">
  {children}
</MorphScroll>

<MorphScroll
  {...props}
  edgeGradient={{ color: "rgba(0, 0, 0, 0.5)", size: 60 }}
>
  {children}
</MorphScroll>

<MorphScroll
  {...props}
  progressTrigger={{
    wheel: true,
    progressElement: <div className="your-scroll-thumb" />,
  }}
>
  {children}
</MorphScroll>

<MorphScroll {...props} progressReverse>
  {children}
</MorphScroll>

<MorphScroll {...props} scrollBarOnHover>
  {children}
</MorphScroll>

<MorphScroll {...props} scrollBarEdge={10}>
  {children}
</MorphScroll>

<MorphScroll {...props} thumbMinSize={40}>
  {children}
</MorphScroll>

— OPTIMIZATIONS —

<MorphScroll {...props} render="virtual">
  {children}
</MorphScroll>

<MorphScroll
  {...props}
  emptyElements={{
    mode: "clear",
    clickTrigger: ".close-button",
  }}
>
  {children}
</MorphScroll>

<MorphScroll {...props} suspending>
  {children}
</MorphScroll>

<MorphScroll {...props} fallback={<div>Loading...</div>}>
  {children}
</MorphScroll>

• Props:

<ResizeTracker className="custom-class">{children}</ResizeTracker>

<ResizeTracker>{children}</ResizeTracker>

<ResizeTracker style={{ backgroundColor: "yellow" }}>{children}</ResizeTracker>

<ResizeTracker measure="all">{children}</ResizeTracker>

<ResizeTracker
  onResize={(rect) => {
    console.log("New size:", rect);
  }}
>
  {children}
</ResizeTracker>

• Links:

  IntersectionObserver

• Props:

<IntersectionTracker className="custom-class">{children}</IntersectionTracker>

<IntersectionTracker>{children}</IntersectionTracker>

<IntersectionTracker style={{ backgroundColor: "yellow" }}>
  {children}
</IntersectionTracker>

<IntersectionTracker root={document.getElementById("observer-container")}>
  {children}
</IntersectionTracker>

<IntersectionTracker rootMargin={10}>{children}</IntersectionTracker>

<IntersectionTracker threshold={0.5}>{children}</IntersectionTracker>

<IntersectionTracker visibleContent>{children}</IntersectionTracker>

<IntersectionTracker
  onIntersection={(entry) => {
    if (entry.isIntersecting) loadMoreItems();
  }}
>
  {children}
</IntersectionTracker>

• Links:

  IntersectionObserver

〈 License 〉

• MIT