部分適用を利用したwithProviders関数

まえがき

こんにちわ。nap5です。

部分適用を利用したwithProviders関数の紹介です。

結論

import type { ComponentType, PropsWithChildren } from "react";

type Props = Record<string, unknown>;

export const withProviders = <P extends Props>(
  InnerComponent: ComponentType<P>,
  Providers: readonly ComponentType<PropsWithChildren>[]
) => {
  return function ComponentWithProviders(props: P) {
    return Providers.reduceRight((acc, Provider) => {
      return <Provider>{acc}</Provider>;
    }, <InnerComponent {...props} />);
  };
};

demo code.

https://codesandbox.io/s/nkg9wm

こちらのレポジトリは学びが多いです

あとがき

簡単ですが、以上です。