framer motion all in modules

Framerdiv

1import { motion } from "framer-motion";
2import { ReactNode } from "react";
3
4type RRNode = {
5  children: ReactNode;
6};
7
8const Framerdiv = ({ children }: RRNode): JSX.Element => {
9  return (
10    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }}>
11      {children}
12    </motion.div>
13  );
14};
15
16export default Framerdiv;

背景

このmotion.divを全てのページに書くのは冗長的すぎるし変更の度に書き換えるのが手間でいつも呼び出し元を一つにできないかと考えていました。 最近ActiveLinkをまた弄っていてchildrenの属性とpropsの型属性に気付いて今回はやりました。

たったのActiveLinkと同じでたったの三行で実現できましたね。 正直もっと早く実装すればよかったです。

pagePropsをLayoutで挟むようにこの最上位ページで効かせられれば話が早いのですけど、その方法は色々試して上手く行かなかったです。

これでFramerdivを呼び出して<motion.div>の代わりに<Framerdiv>で最上位DOMツリーをくくれば呼び出し元がこのコンポーネント一つで一括で変更することができます。