Enhancing Flexibility in React Components with Default Props

When building reusable React components, one challenge developers often face is balancing flexibility with simplicity. For example, how do you provide sensible defaults while still allowing the consumers of your component to customize its behavior? The solution lies in leveraging default props effectively.
In this article, we’ll discuss how to implement default props in React components to make them adaptable and user-friendly without compromising flexibility.

The Problem: Managing Props Dynamically

While these customizations make components powerful, they can also lead to problems. Developers may forget to set certain props or pass incorrect values, causing the component to behave unexpectedly.

The Solution: Default Props

Default props are a powerful feature in React that allow you to define default values for a component’s props. When a prop is not provided by the parent component, React automatically uses the default value instead. This ensures that the component always has the necessary data to render correctly, even if the parent component forgets to pass certain props.
Here’s a simple example of setting default props in a functional React component:

import Button from "./components/button";
import { Loading, Warning } from "./components/icons";

export default function App() {
  return (
    <>
      <Button type="primary" icon={<Loading color="white" />} />
      <Button type="secondary" icon={<Loading />} />
      <Button icon={<Loading />} />
    </>
  );
}
const Button= ({
  type,
  icon,
  size,
  disabled,
}: {
  type?: string;
  icon: ReactElement;
  size?: string;
  disabled?: string;
})=> {
  const defaultProps= {
    size: size= "lg" ? "lg" : "md",
    color: type= "primary" ? "white" : "black",
  };
  const newProps= {
    ...defaultProps,
    ...icon.props,
  };
  if (disabled) {
    newProps.color= "gray";
  }
  const clonedIcon= React.cloneElement(icon, newProps);
  return <button>Submit {clonedIcon}</button>;
};
export default Button;
export const Loading = ({ size, color }: { size?: string; color?: string }) => {
  return <span style={{ fontSize: size, color: color }}>⏳</span>;
};
export const Error = () => {
  return <span>❌</span>;
};
export const Warning = () => {
  return <span>⚠️</span>;
};
export const Avatar = () => {
  return <span>😎</span>;
};