Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@maxweek/react-scroller

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@maxweek/react-scroller

Make your blocks scrolling easy, with a custom scroll-bar, based on native browser scroll

  • 1.0.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
13
decreased by-13.33%
Maintainers
1
Weekly downloads
 
Created
Source

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
  • Border padding and fading
  • Horizontal scroll by mouse wheel
  • Minimal processing
  • Based on original browser scroll
  • Extendable

Todo

  • Base scroll
  • Horizonal scroll
  • Grab content
  • Grab cursors and other visual features
  • Class extending
  • Class extending
  • Methods
  • Events

Installation

npm i @maxweek/react-scroller

Usage

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

<Scroller
  needBar={true}
  barAltPosition={false}
  horizontal={false}
  grab={true}
  borderFade={true}
  borderPadding={true}
  grabCursor={true}
  className={'your-scroller-class'}
  barClassName={'your-scroller-bar-class'}
  barRollerClassName={'your-scroller-bar-roller-class'}
  contentClassName={'your-scroller-content-class'}
>
  {/* Your content */}
</Scroller>

Props

PropNameTypeDefaultDescription
childrenReactNodeReact child
needBar?booleanfalseenables scrollbar
barAltPosition?booleanfalsechanges scrollbar position, default at right - changes to left, when horizontal enabled - changes bottom to top
horizontal?booleanfalsemakes your box scrolling horizontal
grab?booleanfalseenables grabbing your scroll content
borderFade?booleanfalseadd fadding in directions of scroll by masking
borderPadding?booleanfalseadd padding in directions of scroll
grabCursor?booleanfalseenables grab cursor on hover
className?string''class for scroller box
barClassName?string''class for scrollbar
barRollerClassName?string''class for scrollbar roller
contentClassName?string''class for content wrapper

License

  • React Scroll is licensed under the MIT License. Explore this to understand terms and conditions of the license- https://opensource.org/licenses/MIT

Thank you for using my package! Max Nedelko

FAQs

Package last updated on 10 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc