@codingjack/react-scrollable v1.0.5

React-Scrollable

A simple vertical scrollbar that's lightweight and does the job | Demo

Description

• When you just want to hide those ugly browser scrollbars but still want everything to work the same
• No need to do any crazy CSS overrides. Just pass your scrollbar styles as props
• Automatic content indenting (you choose the space) to fit the scrollbar neatly within your container

Getting Started

Install from npm

npm i @codingjack/react-scrollable

Basic Setup & Options

/* your content container, it just needs a height */
.your-content-container {
	max-height: 300px; /* mandatory */
	padding: 30px;
	background: #DDD;
}

import Scrollable from '@codingjack/react-scrollable';

/*
  optional callback for when the container has been changed 
  from "scrollable" to "non-scrollable" or vice versa
*/
const scrollActiveChange = isScrollable => {
	console.log( isScrollable );
};

<div className="your-content-container">
	<Scrollable 
		trackColor="#999"
		handleColor="#666"
		handleHoverColor="#555"
		handleActiveColor="#444"
		scrollbarWidth={ 10 }
		scrollbarSpacing={ 25 }
		scrollbarBorderRadius={ 5 }
		scrollActiveChange={ scrollActiveChange }
	>content to be scrolled goes here</Scrollable>
</div>

Editing JS/SCSS source files

npm install
npm run watch
npm run build
npm run test

Built With / Technology Used

• React
• SASS
• Babel
• Webpack
• ESLint
• Jest
• Enzyme
• core-js
• resize-observer-polyfill

Authors

• Jason McElwaine - Initial work - CodingJack

License

• The original work in this project is licensed under MIT
• All dependencies and cited technology above are licensed under MIT

Additional Notes

• react-scrollable is a PureComponent
• The component uses MutationObserver and ResizeObserver (pollyfilled) to listen for when it needs to be updated as opposed to componentDidUpdate. This allows the Component to avoid expensive DOM computations on every render.
• Since the container is really being scrolled by its native scrollbar (hidden from view), things like element.scrollIntoView() work as expected.