🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

@xico2k/react-scroll-area

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@xico2k/react-scroll-area

[![Build Status](https://travis-ci.org/xiCO2k/react-scroll-area.svg?branch=master)](https://travis-ci.org/xiCO2k/react-scroll-area) [![npm downloads](https://img.shields.io/npm/dt/@xico2k/react-scroll-area.svg)](https://npmcharts.com/compare/@xico2k/react

1.2.0
latest
Source
npm
Version published
Weekly downloads
5
-84.37%
Maintainers
1
Weekly downloads
 
Created
Source

Build Status npm downloads

react-scroll-area Demo

NPM

A scroll area wrapper to mimic Facebook Scroll Area

Demo

Installation

With npm:

$ npm i @xico2k/react-scroll-area

or with yarn:

$ yarn add @xico2k/react-scroll-area

Usage

On your component add:

import ScrollArea from '@xico2k/react-scroll-area';

To render:

<ScrollArea>
    Some Content
</ScrollArea>

Props

All props are optional.

NameTypeDefaultDescription
widthstring / numberEx: 100% / 100px / 100
heightstring / numberEx: 100% / 100px / 100
trackHiddenboolfalse
trackHideTimeint1000Milliseconds
minHandlerHeightint70Pixels
trackMarginint4Pixels
onScrollfunccallback with { scrollTop: 50, innerHeight: 100, outerHeight: 50, complete: 0.5 }
classNamestringclass added to the outer container
innerClassNamestringclass added to the inner container
overflowClassNamestringclass added to the overflow container
trackClassNamestringclass added to the track container
handlerClassNamestringclass added to the handler container

Methods

  • goToBottom(duration = 400);
  • goToTop(duration = 400);
  • goToPos(pos = 50, duration = 400);
  • triggerScroll();

FAQs

Package last updated on 10 Mar 2021

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