https://github.com/tomassestak/react-spring-scroll-to-hook

Simple custom hook for scrollTo functionality in react-spring v9
https://github.com/tomassestak/react-spring-scroll-to-hook

custom-hook hook react-hook react-spring scrollto-functionality

Last synced: 11 months ago
JSON representation

Simple custom hook for scrollTo functionality in react-spring v9

• Host: GitHub
• URL: https://github.com/tomassestak/react-spring-scroll-to-hook
• Owner: TomasSestak
• Created: 2021-03-01T13:58:01.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-21T23:06:30.000Z (about 5 years ago)
• Last Synced: 2025-06-11T20:02:51.767Z (about 1 year ago)
• Topics: custom-hook, hook, react-hook, react-spring, scrollto-functionality
• Language: TypeScript
• Homepage: https://TomasSestak.github.io/react-spring-scroll-to-hook/
• Size: 764 KB
• Stars: 14
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-spring-scroll-to-hook

> Simple custom hook for ScrollTo functionality using react-spring v9+.

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

## Install

```bash

npm install react-spring-scroll-to-hook

```

```bash

yarn add react-spring-scroll-to-hook

```

## Usage

useScrollTo hook accepts 1 argument a that is react-spring config: https://react-spring.io/common/configs

scrollTo function returned from useScrollTo hook accepts 2 arguments:

    1: Element | string | number (number of pixels from top of the window)

    2: Number (offset in pixels from element you want to scroll to)

I don't know how three shaking works but I would recommend using @react-spring/web (used in this hook) instead of react-spring

## Examples

```tsx

import {config} from '@react-spring/web'

import useScrollTo from 'react-spring-scroll-to-hook'

//Scroll to element

const BasicExampleWthConfig = () => {

    const {scrollTo} = useScrollTo(config.molasses)

    return (

         scrollTo(document.querySelector('#id'))}>

            Scroll to Element with predefined config from react-spring

        

    )

}

//Scroll to top

const ScrollToTop = () => {

    const {scrollTo} = useScrollTo({ mass: 1, tension: 180, friction: 12 })

    return (

        

            Scroll to the top of the page with your config

        

    )

}

//Scroll to top with offset and first argument as string only (document.querySelector is used in the hook)

const ScrollToTopWithOffset = () => {

    const {scrollTo} = useScrollTo()

    return (

         scrollTo('#id', 300)}>

            Scroll to the top of the page with default config and offset from element

        

    )

}

```

## License

MIT © [TomasSestak](https://github.com/TomasSestak)