@maxweek/react-scroller NPM

React-scroller

Make your blocks scrolling easy, with a custom scroll-bar, based on native browser scroll. It is for simple and progressive applications, works on all modern browsers. It has a minimal load on the system, and has maximum performance, expandable and updatable

Features

Default scroll
Horizontal scroll
Grab content
Grab cursor
Interactive scrollbar
Variation of scrollbar positions
Trackpad detecting
Border padding and fading
Horizontal scroll by mouse wheel
Minimal processing
Based on original browser scroll
Extendable
Auto updating on child changes
Base Events
Base Methods
Ref with methods and properties (with interface)
Observing self size and reiniting automatically

Todo

Base scroll
Horizonal scroll
Grab content
Grab cursors and other visual features
Class extending
Base Methods
Base Events
Required styles
Trackpad detect
ResizeObserver
Scrolling Duration
More Methods
More Events
Inertia (custom scroll engine)

Installation

npm i @maxweek/react-scroller

First Usage

import Scroller from "@maxweek/react-scroller";
import "@maxweek/react-scroller/css";

const YourComponent = () => {
  <Scroller>
    {/* Your content */}
  </Scroller>
}

Usage

import Scroller, { IScrollerRef, Scroller, IScroller, IScrollerProperties } from "@maxweek/react-scroller";
import "@maxweek/react-scroller/css";

const YourComponent = () => {
  // Ref
  const scrollerRef = useRef<IScrollerRef>(null);

  // Methods
  const scrollToStart = () => {
    scrollerRef.current?.scrollToStart()          // scroll to start
  }
  const scrollToEnd = () => {
    scrollerRef.current?.scrollToEnd()            // scroll to end
  }
  const scrollTo = () => {
    scrollerRef.current?.scrollTo(100)            // scroll to 100px
  }
  const update = () => {
    scrollerRef.current?.update()                 // update scroll calculations
  }
  const getScrollerRef = () => {
    let ref = scrollerRef.current?.scrollRef      // get ref of main scroller box to contol manualy
  }
  const getProperties = () => {
    if (!scrollerRef.current) return
    let properties: IScrollerProperties = scrollerRef.current?.getProperties() // get properties of scroller object
  }

  // Scroller
  <Scroller
    ref={scrollerRef}
    needBar={true}
    barAltPosition={false}
    horizontal={false}
    grab={true}
    borderFade={true}
    autoHide={false}
    borderPadding={true}
    grabCursor={true}
    showWhenMinimal={true}
    className={'your-scroller-class'}
    barClassName={'your-scroller-bar-class'}
    barRollerClassName={'your-scroller-bar-roller-class'}
    contentClassName={'your-scroller-content-class'}
    onScroll={(progress: number, duration?: number) => console.log(`scroll progress ${progress}`)}
    onReachStart={(duration?: number) => console.log('reach start')}
    onReachEnd={(duration?: number) => console.log('reach end')}
  >
    {/* Your content */}
  </Scroller>
}

Full usage you can see on https://github.com/maxweek/react-scroller

Props

  import { IScroller } from "./scroller/scroller"
  import "@maxweek/react-scroller/css";

  const props: Partial<IScroller> = {
    needBar: true,
    barAltPosition: false,
    horizontal: false,
    grab: true,
    autoHide: false,
    borderFade: true,
    borderPadding: true,
    grabCursor: true,
    showWhenMinimal: true,
    className: 'your-scroller-class',
    barClassName: 'your-scroller-bar-class',
    barRollerClassName: 'your-scroller-bar-roller-class',
    contentClassName: 'your-scroller-content-class',
    onScroll={(progress: number) => console.log(`scroll progress ${progress}`)}
    onReachStart={() => console.log('reach start')}
    onReachEnd={() => console.log('reach end')}
  }

Methods

  import { IScrollerRef, Scroller, IScroller, IScrollerProperties } from "./scroller/scroller"

  const scrollerRef = useRef<IScrollerRef>(null) 

  // Methods
  const scrollToStart = () => {
    scrollerRef.current?.scrollToStart(2000)          // scroll to start
  }
  const scrollToEnd = () => {
    scrollerRef.current?.scrollToEnd(2000)            // scroll to end
  }
  const scrollTo = () => {
    scrollerRef.current?.scrollTo(100, 2000)            // scroll to 100px
  }
  const update = () => {
    scrollerRef.current?.update()                 // update scroll calculations
  }
  const getScrollerRef = () => {
    let ref = scrollerRef.current?.scrollRef      // get ref of main scroller box to contol manualy
  }
  const getProperties = () => {
    if (!scrollerRef.current) return
    let properties: IScrollerProperties = scrollerRef.current?.getProperties() // get properties of scroller object
  }

Your issues on github

Github https://github.com/maxweek/react-scroller

Thank you for using my package!

Max Nedelko 2024