はじめに

中野区在住の中野です。

Gatsby.jsでもっと見るボタンを作ったのでメモを残しておきます。

Gatsby.jsにもっと見るボタンを作った話

  • もっと見るボタンとは
  • 実際の実装

もっと見るボタンとは

簡単に言えば、記事一覧の表示件数を増やしたい場合は、ボタンをClickすることで表示件数が数件ずつ増えていく機能です。

実際の実装

もっと見るボタンのcomponentを作成

  • 引数の説明
    • display 全ての記事を表示した場合はもっと見るボタンを表示しないようにする
    • chunk いくつずつ増やしていくのか
    • scope いくつ記事を表示するのか
    • setScope 表示する記事数を更新する
import React from "react"
const ShowMoreButton = ({ display, chunk, scope, setScope }) => {
return(
<>
<div style={{ display: display ? '' : 'none' }}>
<button onClick={ () => setScope(scope+chunk) }>
{ "show more" }
</button>
</div>
</>
)
}
export default ShowMoreButton

記事一覧componentを作成

  • 簡単な解説
    • 記事一覧取得は gatsby-theme-blog のcomponentを利用
    • useState() を利用してClickした回数のステータスを管理
    • posts.slice(0, scope) でscopeの分だけ記事を表示する
    • posts.length > scope 記事一覧よりもscopeが大きくなったら非表示にするための条件
import React from "react"
import OriginalPostList from "gatsby-theme-blog/src/components/post-list"
import ShowMoreButton from "components/ShowMoreButton"
const PostList = ({ posts }) => {
const [scope, setScope] = React.useState(10);
const chunk = 5
return(
<>
<OriginalPostList posts = { posts.slice(0, scope) } />
<ShowMoreButton display={ posts.length > scope } setScope={ setScope } scope={ scope } chunk={ chunk } />
</>
)
}
export default PostList

さいごに

今後もブログの機能を作っていく中で hooks 活用していきたいと思いました

\ Share /

全人類同時接続数No.1!バトルロイヤルゲームを生き残れ!

中野区在住の中野です。大阪生まれ大阪育ちですが就職のタイミングで上京しました。食いっぱぐれないようにすることをモットーに生存戦略を常に考えている元ネトゲ廃人現フルリモートwebエンジニア。Twitterでメンターとして駆け出しエンジニアたちをサポートしています。最近の関心事はDDDとScrum。いずれ起業することを考えてプロダクトを作成中。このブログでは生存戦略を考える上で試行錯誤した内容を記録していきます。