📜 Placeholder Component

Introduction

There are gonna be many situation within an application, where I would like to display a message to the user. Doing so is way easier when having a template ready to be used wherever. In this mini article I will implement exactly such an placeholder.

---

Implementation

I will create my template in the component folder, since this is definitely a component im likely to reuse across different projects:

src/components/placeholder.tsx

import { LucideMessageSquareWarning } from "lucide-react";
import { cloneElement } from "react";
 
type PlaceholderProps = {
  label: string;
  icon?: React.ReactElement;
  button?: React.ReactElement;
};
 
const Placeholder = ({
  label,
  icon = <LucideMessageSquareWarning />,
  button = <div />,
}: PlaceholderProps) => {
  return (
    <div className="flex-1 self-center flex flex-col items-center justify-center gap-y-2">
      {cloneElement(icon, {
        // @ts-expect-error React changing the React.ReactElement type from any to unknown.
        className: "w-16 h-16",
      })}
      <h2 className="text-lg text-center">{label}</h2>
      {cloneElement(button, {
        // @ts-expect-error React changing the React.ReactElement type from any to unknown.
        className: "h-10",
      })}
    </div>
  );
};
 
export { Placeholder };
 

Now whenever I need to use this component, I can customize my message add a matching icon and even define the link where the user should be forwarded to.