Overrides

Overrides let you alter a component's behavior at runtime. This is an escape-hatch feature when you need more customization than uipkg can offer.

Usage

Overrides is a prop that exists on all published components. You can use it to override the inner component tree to your liking. E.g. change element type, add extra attributes, bind event handlers or hide elements with display: none.

Here's an example that overrides Button element inside the component to show an anchor tag that opens a new tab to uipkg.com.

App.jsx

import Listing from "@martynas/listing";

const App = () => {
  return (
    <Listing
      overrides={{
        Button: {
          as: "a",
          href: "https://uipkg.com",
          target: "_blank",
        },
      }}
    />
  );
};

export default App;

Override key names are taken from your Figma component's elements. This prop also has TypeScript definitions, so you'll always know what you can override.