Replaceable Components

Many components allow you to augment layout and functionality by replacing the default components with your own, using the components property. These components are given all the current props and state letting you achieve anything you dream up.

Usage

Use the components prop to replace the default components with your own.

<ComponentName components={{ Icon, Text }} />

Example

In this example the Icon and Text components inside the Empty component are replaced with custom components.

() => {
  //Place outside the scope of the component
  const Text = ({ children, title }) => (
    <>
      <h5>👍 {title}</h5>
      <p>{children}</p>
    </>
  );

  const Icon = () => (
    <div style={{ fontSize: "3em", margin: "0 3em" }}>
      🎬
    </div>
  );

  return (
    <Empty components={{ Icon, Text }} title="Example">
      The content is here
    </Empty>
  );
};

When defining replacement components, it is important to do so outside the scope of rendering the component. Defining a replacement component directly in the components prop can cause issues.

Reference

• react-select replaceable components