react-use の実装から学ぶ custom hooks
react-use とは React の便利 custom hooks が定義されているライブラリ。 頑張って実装した hooks が「react-use にすでにありますよ」と指摘されることがよくある。 記事の目的 react-use を使う、使わないに関わらず react hooks の実装や設計から学べることは多い。 いくつか react-use の実装例[1]を見ながら、 筆者が面白いと思う実装例をいくつか紹介したい。 useToggle on/off を切り替えるトグル。 実装 import { Reducer, useReducer } from 'react'; const toggleReducer = (state: boolean, nextValue?: any) => typeof nextValue === 'boolean' ? nextValue : !sta
react-useを使ってカルーセルを作ってみた
はじめに こんにちは！ スペースマーケットでフロントエンドエンジニアをしているk___0122です。 今回はreact-useのuseIntersectionを使って以下のようなカルーセルを作ったので紹介したいなと思います！ デモアプリ https://carousel-practice.vercel.app/ 完成形のコード https://github.com/kazuki0122/carousel_practice 今回作るカルーセルは以下の仕様で実装します。 スクロールができること インジケーターが現在表示されてる画像に合わせて活性化すること 矢印をクリックしたら画像が切り替わること 実装してみる スクロールができることは以下のCSSのみでできます。 overflow-x: scrollではみ出した要素をスクロールできるようにします。 またscroll-snap-type: x m
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
