How Tos

Replaceable Components

Tools & Libraries

A feature of this library is providing consumers with the building blocks necessary to create their component.

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.

Expand code

Editable Example

() => {
  //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

On this page