Add behavior to a layer with a code override

A code override is a function from one of your site's code modules that wraps a layer: a heading, a frame, an image, a button. On your published site, the function adds what the layer can't do by itself, such as counting clicks or reacting to the pointer. The layer keeps its content and its design. Code overrides are reaching workspaces in stages, so you may not see them yet.

Attach an override

1. Select one layer. Overrides work on any layer except a code component and a page itself.
2. In the properties panel, open Code override. It shows when your site has at least one code module.
3. Under Module, choose the module.
4. Under Function, type the name of the function the module exports, for example withHover, and press Enter. The name uses letters, digits, _ and $, and doesn't start with a digit.

The override uses the module's newest version. Version moves it to another one. Remove override takes it off, and None under Module does too.

Write the function

The function gets the layer as a component and returns a component that renders it:

import { useState } from 'react';

export function withHover(Layer) {
  return function WithHover(props) {
    const [over, setOver] = useState(false);
    return (
      <Layer
        {...props}
        onMouseEnter={() => setOver(true)}
        onMouseLeave={() => setOver(false)}
        style={{ outline: over ? '2px solid' : 'none' }}
      />
    );
  };
}

What it passes to the layer:

• Event handlers, such as onClick or onMouseEnter. Events anywhere inside the layer reach them.
• style, as an object. Numbers are in pixels, as in React.
• className, added to the layer's own classes.
• data-… and aria-… attributes, and title.

Everything else, including children, is ignored: the layer's content stays what you designed.

Where it runs

• On your published site, including preview links. The canvas shows the layer as you designed it.
• Every page that shows the layer runs the override, in every language.
• If the function isn't there or fails, the layer stays as published, and the rest of the page keeps working.
• A layer that is a carousel's slide, or a block inside a text, keeps its look but loses the styling of that position.