💪

react-simple-pull-to-refreshを使って、引っ張って更新する機能を作ってみた

2022/11/08に公開

JavaScript

色々なライブラリ使ってみましたが、これが一番使いやすかったです。

できたもの

オレンジの部分を下に引っ張ります。

するとローディングのコンポーネントが表示されます。

データのfetchが完了すると、データを描画します。

ソースコード

import React, { useState } from "react";
import PullToRefresh from "react-simple-pull-to-refresh";

const List = () => {
  const [todos, setTodos] = useState<any>();
  console.log(todos);

  const handleRefresh = async () => {
    await new Promise((resolve) => setTimeout(resolve, 5000));
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const json = await response.json();
    setTodos(json);
  };
  return (
    <div>
      <div>pull to refresh!!!</div>

      <PullToRefresh onRefresh={handleRefresh} pullingContent={<></>}>
        <ul style={{ minHeight: "100vh", backgroundColor: "orange" }}>
          {todos ? todos.map((todo: any) => <li>{todo.title}</li>) : null}
        </ul>
      </PullToRefresh>
    </div>
  );
};

export default List;

もしapollo clientを使っている場合、onRefreshが発火したタイミングで、refetchを叩いて、キャッシュ関係なしに、最新のデータをとることが可能だと思います。

できたもの

ソースコード

Discussion