react-scrollx

0.1.2 • Public • Published

React Scrollx

React Scrolls is a react component that provides a custom, smooth, and cross-browser scroll.

Motivation

The main idea of React Scrollx is the possibility of creating a cross-browser and customized scroll bar, which can be adapted to most layouts.

Installation

npm install -D react-scrollx

Usage

This minimal instructions will allow you to insert any type of your content like React components, jsx or raw text.

//ES6
import ReactScrollx from 'react-scrolls';
import 'react-scrollx/dist/react-scrollx.css';
 
<ReactScrollx width={100} height={350}>
    <YourContent/>
</ReactScrollx>

API Reference (options/callbacks)

height

  • Prop type: Number;
  • isRequired: true;
  • Set the height for your scroll container, takes a value in pixels;

width

  • Prop type: Number | String;
  • isRequired: true;
  • Set the width for your scroll container. Can take a value in both pixels and in percentage. In case of percents value must be a String;
<ReactScrollx height={400} width="60%"> //here example of percentage width

scrollBarClassName

  • Prop type: String;
  • isRequired: false;
  • Set a custom CSS class for scroll bar;

#### scrollThumbClassName

  • Prop type: String;
  • isRequired: false;
  • Set a custom CSS class for scroll thumb;

#### scrollContainerClassName

  • Prop type: String;
  • isRequired: false;
  • Set a custom CSS class for scroll container;

#### appearOnHover

  • Prop type: Boolean;
  • isRequired: false;
  • By default the scroll is always visible, but setting this option to true will remove the scroll bar and will only show by mouse hover on scroll container;r;

#### scrollBarVisible

  • Prop type: Boolean;
  • isRequired: false;
  • Set visible status of scroll bar;

### Callbacks

#### onTopPosition

  • fire up when scroll thumb come his topmost position;

#### onBottomPosition

  • fire up when scroll thumb come his bottommost position;

#### onScroll

  • fire up everytime when user scrolls;

## Author Bulavyk Serj

## License This project is licensed under the MIT License

Dependents (0)

Package Sidebar

Install

npm i react-scrollx

Weekly Downloads

2

Version

0.1.2

License

MIT

Last publish

Collaborators

  • becherman