Disabling sync should be used as a last resort when you need to change the core behavior of a component. It’s an escape hatch if something about Subframe’s generated code is preventing you from making the changes you need. If that’s the case, let us know!

Rather than disabling sync, we typicallly recommend creating a new component that wraps “dumb” components with business logic. All Subframe components will forward its props to its root React element, meaning you can always add onClick and other handlers as React props. By using this pattern, your components will never be out of sync with Subframe.

For example, you can create a CustomButton like this:

import React from "react";
import { Button } from "@/ui/components/Button";

interface CustomButtonRootProps extends React.ComponentProps<typeof Button> {
  className?: string;
}

export const CustomButton = React.forwardRef<HTMLButtonElement, CustomButtonRootProps>(
  function CustomButtonRoot(
    { className, ...otherProps }: CustomButtonRootProps,
    ref
  ) {
    /**
     * Add any hooks or custom logic here
     */

    return (
      <Button
        className={className}
        ref={ref}
        onClick={() => {
          // You can handle events here too
        }}
        {...otherProps}
      />
    );
  }
);

Sometimes your Subframe component has interactive elements like buttons or dynamic content. We recommend adding a slot for those scenarios. Read our guide on slots and composition.

​
Using @subframe/sync-disable

If you’ve already tried using a wrapper component and still need to disable sync, you can add the following code to the top of your Subframe component file:

// @subframe/sync-disable

This will prevent the changes in your component from being overwritten the next time you sync.