react-scrollを使ったページ内スクロールを実装・テストも作成

react-scrollを使ったページ内スクロールを実装します。

スクロールのトリガーとなるボタンをコーディングし、クリックイベントを追加します。
handleScrollToSearch関数がクリック時に呼び出されscrollToContents()が発火します。

Component.tsx

export const Component: FC = () => {

  const handleScrollToSearch = () => {
    scrollToContents()
  }

  return (
      <button onClick={handleScrollToContents}>
        ボタン
      </button>
    )
}

scrollToContents関数は汎用的に使用できるように切り出します。

react-scrollをインストールし、importします。

yarn add react-scroll

scrollToContents.ts

import { scroller } from 'react-scroll'

export const scrollToContents = () => {
  const defaultHeaderHeight = 68;　

  scroller.scrollTo('scrollToContents', { //scrollさせたい場所のclassNameを指定
    duration: 200, //スクロールにかかる秒数
    delay: 0, //遅延
    smooth: true,
    offset: -defaultHeaderHeight, // 今回の例ではヘッダー分の高さを追加しています
  })
}

オプションについては公式ドキュメントから。

スクロールさせたい場所にclassNamescrollToContentsを指定します。

Component.tsx

export const Component: FC = () => {
  return (
    <div className="scrollToContents">
       ...
    </div>
    )
}

これで実装完了です。

さらにJestを使ったテストはこちら。

scrollToContents.test.ts

import { scroller } from 'react-scroll'
import { scrollToContents } from './scrollToContents'

jest.mock('react-scroll', () => ({
  scroller: {
    scrollTo: jest.fn(),
  },
}))

describe('scrollToContents', () => {
  it('should call scroller.scrollTo with correct arguments when offset is positive', () => {
    const HeaderHeight = 68

    scrollToContents()

    expect(scroller.scrollTo).toHaveBeenCalledWith('scrollToContents', {
      duration: 200,
      smooth: 'easeInOutQuart',
      offset: -HeaderHeight,
    })
  })
})

参照