react-scrollable-content v1.0.2

React-Scrollable-Content

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 react-scrollable-content

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 'react-scrollable-content';

/*
  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.
• Since the container is really being scrolled by its native scrollbar (hidden from view), things like element.scrollIntoView() work as expected.