Partial Component pattern in React

Mar 10, 2023 - 2 min read

How to use :

partial-component.tsx

import React from "react";

export const Label = ({ color, size }: { color: string, size: string }) => {
  return (
    <div>
      <p style={{ color: color, fontSize: size }}>Hello World</p>
    </div>
  );
};

export const partialComponent = (Component: React.FC, partialProps: any) => {
  return (props: any) => {
    return <Component {...partialProps} {...props} />;
  };
};

const RedTitle = partialComponent(Label, { color: "red" });

export const DemoPartialComponent = () => {
  return <RedTitle size="20px" />;
};