1.1.28 • Published 8 months ago

@maxweek/react-scroller v1.1.28

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

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
  }

More

Your issues on github

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

Thank you for using my package!

Max Nedelko 2024

Keywords

"touch", "scrollbar", "horizontal", "scroller", "scroll", "react"

License

1.1.28

8 months ago

1.1.27

8 months ago

1.1.23

10 months ago

1.1.22

10 months ago

1.1.21

10 months ago

1.1.25

10 months ago

1.1.24

10 months ago

1.1.19

10 months ago

1.1.20

10 months ago

1.1.17

1 year ago

1.1.16

1 year ago

1.1.15

1 year ago

1.1.14

1 year ago

1.1.12

1 year ago

1.1.11

1 year ago

1.1.10

1 year ago

1.1.13

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago