# react-heaven-scroll

> Scroll so smooth, it's like it's made in Heaven.

Latest version **1.0.5** (published 2024-01-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-heaven-scroll
pnpm add react-heaven-scroll
yarn add react-heaven-scroll
bun add react-heaven-scroll
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2024-01-06 |
| First published | 2024-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 28.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | John Roussos |
| Maintainers | roussos |
| Keywords | heaven, react, react hook, smooth, scroll |

## Links

- npm: https://www.npmjs.com/package/react-heaven-scroll
- Repository: https://github.com/JRoussos/react-heaven-scroll
- Issues: https://github.com/JRoussos/react-heaven-scroll/issues
- npm.io page: https://npm.io/package/react-heaven-scroll

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2024-01-06
- 1.0.4 — 2024-01-05

## README

# react-heaven-scroll 🪽

Scroll so smooth, it's like it's made in Heaven.

[![NPM](https://img.shields.io/npm/v/react-heaven-scroll.svg)](https://www.npmjs.com/package/react-heaven-scroll) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install react-heaven-scroll
```

## Usage

```jsx
import * as React from 'react'
import HeavenScroll from 'react-heaven-scroll'

const Component = () => {
    return (
        <HeavenScroll velocity={0.06}>
            ...
        </HeavenScroll>
    )
}
```
---
<i>Ideally it should be an immediate descendant of the root element</i>

| Argument    | Type              | Default  | Description                                                            |
| ----------- | ------------------| -------- | -----------------------------------------------------------------------|
| velocity    | number            | 0.1      | A value from 0 to 1 that determines the strength of the effect         |
| style       | style object      | null     | Style object to overide the default styling of the parent element      |
| disable     | boolean           | false    | Whether or not the scroll effect will be enabled                       |
| rootId      | string            | "root"   | The id of the root component to hard set the height                    |
| resetHeight | dependency array  | null     | An array of dependencies to listen for height resetting                |


## API

### useHeaven()
> Returns a react ref created by `useRef()` with the current scroll value and the scroll delta.

```jsx
import * as React from 'react'
import { useHeaven } from 'react-heaven-scroll'

const AnyChildComponent = () => {
    const scroll = useHeaven()
    
    React.useEffect(() => {
        setInterval(() => console.log(scroll), 500)
        // {delta: 0.08175386572542152, scroll: 894.9881211589087}
    }, [])

    return (
        ...
    )
}

```

## LICENSE 

[MIT](LICENCE)

---
_Source: https://npm.io/package/react-heaven-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._