#React初心者がreact-scrollでsmooth scrollを実装してみた話。
自分はまだYoutubeで見たTodoアプリのチュートリアルなどでReactをかじり始めた初心者ですが、今回は実際にコンポーネントごとでUIパーツを作り上げるという概念に慣れるためにも、自分の１ページポートフォリオサイトを作成してみました。
http://takkalghul.github.io/mioportfolio/
こんな感じで、ページの一番下にある上矢印のボタンを押すとトップに戻り、
そのほかでは、navbarのリンクを押すとそれぞれのトピックまでスクロールされるようになっています。
###react-scrollをインストール
npm install react-scroll
githubに使用方法が載ってます。
https://github.com/fisshy/react-scroll
ですが今回私はこのブログを参考に作成しました。
https://scotch.io/tutorials/implementing-smooth-scrolling-in-react
こちらに詳しい使用方法や追加機能などの実装方法が載っています。
###scrollToTopの実装
react-scrollには様々なファンクションがパッケージに含まれており、scrollToTopやscrollToBottomなどで簡単に上下へのスクロールを行うことができます。
はじめに、一番下の上矢印をクリックするとトップに戻れるように、scrollToTopを実装していきます。
ちなみに、scrollToTopの矢印はTitile.jsの子コンポーネントであるScrollUp.jsに記述しています。
import React, { Component } from 'react';
import { animateScroll as scroll } from 'react-scroll';
import './Title.css';
class ScrollUp extends Component {
scrollToTop = () => {
scroll.scrollToTop();
};
render() {
return(
<div className="scroll scroll-up">
<div className="arrow bounce" style={{ bounce }}>
<i onClick={this.scrollToTop} className="fa fa-chevron-circle-up" />
</div>
</div>
);
}
}
const bounce = {
animation: 'bounce 2s infinite',
color: '#fff'
}
export default ScrollUp;
react-scrollからanimateScroll as scrollをimportして宣言します。
functionとしてscrollToTopを定義し、下矢印アイコンをクリックした時にイベントが発火するように
onClick={this.scrollToTop} をiタグ以降に記述していきます。
パッケージだとこの少ない記述だけで簡単にトップへのスクロールが可能になりますね。
###リンクを押したらスクロール
自分はまだプログラミング学習を初めて３ヶ月なもので、まだ色々とわかってないことがたくさんあって、、、
特にreactでのcomponentの考え方がまだよくわかっていないものでこのスクロールの実装すら色々と考えすぎて悩んでましました。
例えば、それぞれのトピックをコンポーネントごとにこのように切り分けたので
import React, { Component } from 'react';
import './App.css';
import Nav from './Components/Nav';
import Title from './Components/Title';
import About from './Components/AboutMe';
import Works from './Components/Works';
import Contact from './Components/Contact';
class App extends Component {
render () {
return (
<div className="app">
<Nav />
<Title />
<About />
<Works />
<Contact />
</div>
);
}
}
export default App;
Nav内にあるnavbarでのリンクを別のコンポーネントへアクセスさせるにはどうすればいいのかなとか、propsでデータを引き継がなきゃいけないのかなとか考えてましたが、react-scrollはとってもシンプルでした。
import React, { Component } from 'react';
import { Layout, Header, Navigation, Drawer } from 'react-mdl';
import { Link } from 'react-scroll';
class Nav extends Component {
render() {
return (
<div className="demo-big-content">
<Layout>
<Header className="header" style={{ fontWeight: 'bold', fontSize: '45px'}} title= " " scroll>
<Navigation className="navigation">
<Link
activeClass="active"
to="title"
spy={true}
smooth={true}
offset={-70}
duration= {800}
>Top</Link>
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration= {800}
>About</Link>
<Link
activeClass="active"
to="works"
spy={true}
smooth={true}
offset={-70}
duration= {800}
>Works</Link>
<Link
activeClass="active"
to="contact"
spy={true}
smooth={true}
offset={-70}
duration= {800}
>Contact</Link>
</Navigation>
</Header>
<Drawer title=" ">
<Navigation>
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration= {1000}
>About</Link>
<Link
activeClass="active"
to="works"
spy={true}
smooth={true}
offset={-70}
duration= {1000}
>Works</Link>
<Link
activeClass="active"
to="contact"
spy={true}
smooth={true}
offset={-70}
duration= {1000}
>Contact</Link>
</Navigation>
</Drawer>
</Layout>
</div>
)
}
}
export default Nav;
react-router-domでも使用されるおなじみのLinkタグを使っていきます。
Linkの後にオプションをつけます。これはgithubにある公式のドキュメントからコピペできます。
to=には移遷したい先のIdを指定しましょう。
smoothスクロールを実装するため、smoothはtrueにしておきます。offsetはpadding-topのようなもので、移遷する位置を指定できます。durationにはスクロールする秒数を指定しましょう。
今回自分はreact-mdlを使用していますので、他のタグなどはお気になさらずに。。
完成版がこちら↓
###便利機能
今回のポートフォリオのnavbarにも使用しているこれ↓ですが
これもreact-scrollで実現できるものです。
しかしながら使用したのはCSSですが。。。
先ほどのLinkタグに追加したactiveClassですが、これがactiveの状態であること ＝ 指定した位置にスクロールしてきた時といういこと。
その時にborder-bottomが適用されるようにCSSを記述しただけです。
.navigation > .active {
border-bottom: 2px solid #fff;
}
###おしまい
react-smooth-scrollなどたくさんのscroll用パッケージが存在しますが、自分はこれが一番シンプルで簡単なのではないかと感じました。
reactに関する知識(JavaScript自体)がまだまだなので、これからはGatsbyやReduxを使ってブログなどを作成しながら学んでいこうと思います。
#####参考
Implementing Smooth Scrolling in React
https://scotch.io/tutorials/implementing-smooth-scrolling-in-react
github fisshy
https://github.com/fisshy/react-scroll