###### _GNARLY CODE Production_ Introducing

React Scroll State

Bunch of components that will help you to lock, track, change and restore scroll position on routing properly.

Installation

``sh
npm i --save @gnarlycode/react-scroll-state
`

Usage

First of all you should add next global styles to your app:

`css
html.html-scroll-lock {
overflow-y: scroll;
}

body.body-scroll-lock {
overflow: hidden;
position: fixed;
}
`

You can get this names as strings importing it:

`jsx
import { injectGlobal } from 'styled-components'
import {
defaultBodyLockClass,
defaultHtmlLockClass,
} from '@gnarlycode/react-scroll-state'

injectGlobal
html.${defaultHtmlLockClass} {
overflow-y: scroll;
}

body.${defaultBodyLockClass} {
overflow: hidden;
position: fixed;
}

`

You can use your own classnames. In this case you should pass it to ScrollStateProvider

$3

Manages all scroll operations. You can just wrap all your app with this provider:

`jsx
import { App } from 'your-app'
import { ScrollStateProvider } from '@gnarlycode/react-scroll-state'

return (



)
`

You can pass custom lock classes as bodyLockClass and htmlLockClass props.

$3

Locks browser scroll when mounted:

`jsx
import { ScrollLocker } from '@gnarlycode/react-scroll-state'

return (
<>
...
{isScrollLocked && }
...

)
`

$3

This component restores scroll position when history changes. Designed to work with React Router 4.

It uses withRouter and withScrollState under the hood so should be mounted anywhere inside Router and ScrollStateProvider:

`jsx
import { App } from 'your-app'
import {
ScrollRestorer,
ScrollStateProvider,
} from '@gnarlycode/react-scroll-state'

return (




)
`

$3

The high-order component provides you scrollState from ScrollStateProvider as prop:

`jsx
import { withScrollState } from '@gnarlycode/react-scroll-state'

const myComponent = withScrollState(({ scrollState }) =>