In this blog, we are going to see how to create a generic higher order component in react using typescirpt.
A generic higher order component can be used in react to share codes between multiple component. For example, if we want Profile component to behave in one way when user is logged in and in other way when user is not logged in. The Profile component can be wrapped in a HOC withLoggedInUser.
In the example above, if user is logged in, we show the name of the user otherwise, we show a login button.
Create “Profile” component
export interface IProfileProps {
// username is passed as props after wrapping with HOC
username: string;
// isLoggedIn is injected by the HOC component
isLoggedIn: boolean;
}
export function Profile({ username, isLoggedIn }: IProfileProps) {
return (
<div>
{isLoggedIn ? (
<p>username: {username} is logged in.</p>
) : (
<p>Please Login In</p>
)}
</div>
);
}
Create “withLoggedInUser” component
export const withLoggedInUser = <T extends {}>(
Component: React.ComponentType<T>
// we omit "isLoggedIn" props and only expose other props of the wrapped component
): React.FC<Props & Omit<T, 'isLoggedIn'>> => {
// withLoggedInUser injects isLoggedIn props to Component
const isLoggedIn = false;
return (props: Props) => {
return (
<>
<Component {...(props as unknown as T)} isLoggedIn={isLoggedIn} />
</>
);
};
};
Using the HOC component
// in app.tsx
const ProfileWithLoggedInUser = withLoggedInUser<IProfileProps>(Profile)
function App() {
return (
<ProfileWithLoggedInUser username='baijanath'>
)
}