React Sweet Scroll

Easily scroll within an element using hooks!

Check out the example at CodeSandbox

Installation

Add @mariosant/react-sweet-scroll to your package.json.

$ npm install @mariosant/react-sweet-scroll

# or
$ yarn add @mariosant/react-sweet-scroll

You can now import the module and use it like

import useScroll from '@mariosant/react-sweet-scroll';

Usage

The hook accepts an array with dependencies which work exactly like useEffect and a set of options, similar to scrollIntoView.

It returns a component, that should be placed to the point the list container should scroll to.

Consider the example below.

import useScroll from '@mariosant/react-sweet-scroll';
import List from './some-component';

const Component = ({messages}) => {
    const ScrollPoint = useScroll([messages]);

    return (
        <List>
            {messages.map(...)}
            <ScrollPoint />
        </List>
    )
};

Meta

Marios Antonoudiou – @marios_ant – [email protected]

Distributed under the MIT license.

https://github.com/mariosant/react-sweet-scroll

Contributing

1. Fork it (https://github.com/mariosant/react-sweet-scroll/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes using a semantic commit message.
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request