morphing-scroll v1.5.22

〈♦ Table of contents 〉

• About
• Installation
• MorphScroll
• ResizeTracker
• IntersectionTracker
• API

〈♦ About 〉

morphing-scroll is a React library designed to optimize the rendering of data lists. It leverages virtual rendering and lazy loading to handle large datasets efficiently, significantly enhancing performance. The library also resolves cross-browser inconsistencies in scroll element rendering by replacing them with custom ones. Additionally, it provides convenient horizontal scrolling with flexible content movement options.

〈♦ Installation 〉

To install the library, use the following command:

npm install morphing-scroll

〈♦ MorphScroll 〉

MorphScroll is the main component of the library responsible for displaying your data.

• Props:

  GENERAL SETTINGS:

    ```tsx
    <MorphScroll
      className="your-class"
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      // props
    >
      {children}
    </MorphScroll>
    ```

  SCROLL SETTINGS:

    ```tsx
    <MorphScroll
      type="slider"
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      direction="x"
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      scrollTop={{ value: 100; duration: 100 }}
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      stopLoadOnScroll
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      onScrollValue={
        (scroll) => {
          console.log("Scroll position:", scroll);
          return scroll > 100;
        },
      }
      // another props
    >
      {children}
    </MorphScroll>
    ```

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

  VISUAL SETTINGS:

    ```tsx
    <MorphScroll
      size={[100, 400]}
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      objectsSize={[40, 40]}
      // objectsSize={["none", "none"]}
      // objectsSize={["firstChild", "firstChild"]}
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      gap={10}
      // gap={[10, 10]}
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      padding={10}
      // padding={[10, 10]}
      // padding={[10, 10, 10, 10]}
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      contentAlign={["center", "center"]}
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      elementsAlign="center"
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      edgeGradient={{ color: "rgba(0, 0, 0, 0.5)" }}
      // edgeGradient={{ color: "rgba(0, 0, 0, 0.5)", size: 20 }}
      // edgeGradient
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      progressReverse
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      progressVisibility="hover"
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      objectsWrapFullMinSize
      // another props
    >
      {children}
    </MorphScroll>
    ```

  PROGRESS AND RENDERING:

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

    ```tsx
    <MorphScroll
      render={{ type: "virtual" }}
      // render={{
      //   type: "lazy",
      //   rootMargin: [0, 100],
      //   onVisible: () => console.log("visible"))
      // }}
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      emptyElements={{
        mode: "clear",
        clickTrigger: { selector: ".close-button" },
      }}
      // emptyElements={{
      //   mode: "fallback",
      //   clickTrigger: {
      //     selector: ".close-button",
      //     delay: 100,
      //   },
      // }}
      // another props
    >
      {children}
    </MorphScroll>
    ```

    ```tsx
    <MorphScroll
      suspending
      // another props
    >
      {children}
    </MorphScroll>
    ```

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

〈♦ ResizeTracker 〉

ResizeTracker is a React component that monitors changes to an element’s size. It provides updated dimensions via a render-prop function whenever the observed element is resized.

• Props:

    ```tsx
    <ResizeTracker
    // another props
    >
      {(rect) => (
        <p>
          Width: {rect.width}, Height: {rect.height}
        </p>
      )}
    </ResizeTracker>
    ```

    ```tsx
    <ResizeTracker style={{ backgroundColor: "blue" }}>
      {(rect) => (
        // content
      )}
    </ResizeTracker>
    ```

    ```tsx
    <ResizeTracker measure="all">
      {(rect) => (
        // content
      )}
    </ResizeTracker>
    ```

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

• Link:

  IntersectionObserver

〈♦ IntersectionTracker 〉

IntersectionTracker is a React component for tracking the intersection of an element with the viewport.

• Props:

    ```tsx
    <IntersectionTracker>{children}</IntersectionTracker>
    ```

    ```tsx
    <IntersectionTracker style={{ backgroundColor: "blue" }}>
      {children}
    </IntersectionTracker>
    ```

    ```tsx
    <IntersectionTracker root={document.getElementById("root")}>
      {children}
    </IntersectionTracker>
    ```

    ```tsx
    <IntersectionTracker
      rootMargin={10}
      // rootMargin={[10, 20]}
      // rootMargin={[10, 20, 10, 20]}
    >
      {children}
    </IntersectionTracker>
    ```

    ```tsx
    <IntersectionTracker
      threshold={0.5}
      // threshold={[0, 0.5, 1]}
    >
      {children}
    </IntersectionTracker>
    ```

    ```tsx
    <IntersectionTracker visibleContent>{children}</IntersectionTracker>
    ```

    ```tsx
    <IntersectionTracker
      onVisible={(key) => {
        if (key.includes("elementId")) {
          // do something
        }
      }}
    >
      {children}
    </IntersectionTracker>
    ```

• Link:

  IntersectionObserver

〈♦ API 〉

• MorphScroll: React component that optimizes the rendering of data lists.
• ResizeTracker: React component that monitors changes to an element’s size.
• IntersectionTracker: React component for tracking element visibility in the viewport.