import { ReactNode } from "react";
export function Flex({ children, style }: { children?: ReactNode ,style?: React.CSSProperties }) {
return <div style={{ display: "flex", ...style }}>
{children}
</div>
}
仕事でReactを使っているが、Amplify UI以外のライブラリをほとんど使っていない。必要なコンポーネントがあれば自前で実装するし、ややこしいものはライブラリを探して、そのコードからエッセンスを読み取り、その上で自前で再実装してしまう。
どこの誰とも知らない人間が書いた保守されるかどうかもわからずセキュリティも保証されないものを使うより、自分で書いたコードの方が信頼できる。
いずれAmplifyから離れることもあろうから、Amplify UIも再実装してしまいたい。Amplify UIのFlexコンポーネントはうまく出来ている。display: flex;と書くよりも記述量が少ないし、何をしたいのかタグから読み取れて明瞭だ。それでいてAWSに依存しない。テーマ機構とも無関係。再実装するに値するコンポーネントだ。