# Material-UI Scrollbars

Tiny React wrapper around awesome [OverlayScrollbars plugin](https://kingsora.github.io/OverlayScrollbars/#!overview) for more convenient usage with [Material-UI](https://material-ui.com/) applications. OverlayScrollbars is a javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars, and keeps the native functionality and feeling. It enables us to implement stylish scrollbars with consistent appearance across browsers and platforms, and make our UI/UX designers happy.

## Scrollable component

The `Scrollable` component is just a normal div element wrapped with `OverlayScrollbars` plugin. It exposes all div props, OverlayScrollbars props.

### Autocomplete integration

When using `Scrollable` as custom `ListboxComponent` of `Autocomplete`, make sure to assign forwarded ref to viewPort element and also to set role to `listbox` on view port element.
For that scenario, `Scrollable` component exposes `viewPortProps` property

```typescript jsx
import React from 'react';
import { Scrollable } from '@vdjurdjevic/material-scrollbars';
import { Autocomplete } from '@material-ui/lab';

export const AutocompleteScroll = React.forwardRef(({ children, ...rest }, ref) => {
    return (
        <Scrollable {...rest} viewPortProps={{ ref, role: 'listbox' }}>
            {children}
        </Scrollable>
    );
});

export const ScrollableAutocomplete = props => {
    return (
        <Autocomplete
            {...props}
            ListboxComponent: AutocompleteScroll
        />
    );
};
```

## ScrollableTextArea component

`ScrollableTextArea` shares same API with Scrollable component, but renders textarea element instead of div, and provides 'inputRef' prop that can be used to integrate with FormControl and form libraries like [React Hook Form](https://react-hook-form.com/)

### Text field integration

```typescript jsx
import { useForm } from 'react-hook-form';
import { TextField } from '@material-ui/core';
import { ScrollableTextArea } from '@vdjurdjevic/material-scrollbars';

const { register } = useForm({
	defaultValues: {
		message: 'Text area with nice scrollbar'
	}
});

<TextField
	variant='outlined'
	label='Scrollable Text Area'
	name='message'
	inputRef={register}
	InputProps={{
		inputComponent: ScrollableTextArea
	}}
/>;
```

## Hook

For accessing OverlayScrollbars instance and programmatic scrolling, there is `useScrollable` hook that returns ref that can be attached to the scrollable component and has methods for scroll manipulation.

### Basic usage

```typescript jsx
import React from 'react';

import { Buttom } from '@material-ui/core';
import { Scrollable, useScrollable } from '@vdjurdjevic/material-scrollbars';

export const ScrollableHookExample: React.FC = () => {
	const scrollable = useScrollable();

	return (
		<div>
			<Scrollable ref={scrollable}>Some scrollable content</Scrollable>
			<Button
				variant='contained'
				onClick={() => scrollable.current.instance().scroll({ y: '+= 40px' })}>
				Scroll
			</Button>
		</div>
	);
};
```

## Styling

This library has `@material-ui/core` as a peer dependency and uses it's [styling solution](https://material-ui.com/styles/basics/) based on JSS. Unlike with plain OverlayScrollbars, with this wrapper, it's not necessary to import global stylesheet. Global styles are implemented with JSS also, so that components work out of the box, without additional setup.

## Docs and Examples

Docs will improve over time, for now please use official [OverlayScrollbars](https://kingsora.github.io/OverlayScrollbars/#!overview) and [Material UI](https://material-ui.com/) Docs. If you would like to experiment with it, you can clone the repo, run `yarn install`, and `yarn run dev` to start storybook and use it as a playground. There are some basic examples to start with, but feel free to add yours and submit a pull request if others can benefit from it.