interaction-toolkit ·

English | 한국어 | 简体中文 | 日本語

interaction-toolkit is a utility library that makes element interactions easy to implement in web applications.

• scrollToSide: Scroll elements or window to specified directions (left, right, top, bottom) with smooth animations.
• getScrollShadowStates: Get scroll shadow states for elements with optional continuous monitoring via callbacks.
• More interaction utilities coming soon!

Examples

import React, { useRef } from "react";
import { scrollToSide } from "interaction-toolkit";

function ScrollExample() {
  const containerRef = useRef(null);

  const scrollToBottom = () => {
    scrollToSide(containerRef.current, {
      direction: "bottom",
      scrollBehavior: "smooth",
    });
  };

  const scrollToRight = () => {
    scrollToSide(containerRef.current, {
      direction: "right",
      scrollBehavior: "smooth",
    });
  };

  return (
    <div>
      <button onClick={scrollToSide}>Scroll to Bottom</button>
      <button onClick={scrollToRight}>Scroll to Right</button>

      <div ref={containerRef} style={{ height: "200px", overflow: "auto" }}>
        {/* Your scrollable content */}
      </div>
    </div>
  );
}

License

MIT © bunnySung. See LICENSE for details.