スクロールmbti#7:ページ切り替え機能を実現


ページ切り替えの方法はいろいろありますが、簡単にcontextでページ切り替え機能を実現しました.
src/contexts/page.js
import { createContext } from "react";

const PageContext = createContext({
  status: "start",
  action: () => {},
});

export default PageContext;
src/App.jsx
...
  const [page, setPage] = useState("ready");
  return (
    <PageContext.Provider value={{ status: page, action: onClick }}>
      <Reset />
      <StyledDiv className="App">
        <Template />
      </StyledDiv>
    </PageContext.Provider>
  );
同じ感覚で、onClickには適当なページめくり関数が入っています.ページごとに、めくるとonClickでsetPageでページを変えた感じで表現します.