Changelog

Component decorators

This update introduces component decorators, a new pattern for applying global styles and wrapping components with providers. Configure globally to apply to every component in your library or locally to a single component.

Packages:

• @webflow/webflow-cli 1.9.0
• @webflow/react 1.1.0
• @webflow/data-types 1.1.0
• @webflow/emotion-utils 1.1.0
• @webflow/styled-components-utils 1.1.0

Global component decorators

Instead of importing styles or adding decorators to each component individually, you can now configure them once in a global decorators file.

Configure in webflow.json:

1
{
2
  "library": {
3
    "globals": "./src/globals.ts"
4
  }
5
}

Global styles

Import CSS once and apply it to all components:

1
import "./globals.css";

CSS-in-JS libraries

For Emotion and styled-components, export the pre-built decorators to inject styles into the Shadow DOM:

1
import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
2
3
export const decorators = [emotionShadowDomDecorator];

Pre-built decorators:

• emotionShadowDomDecorator from @webflow/emotion-utils
• styledComponentsShadowDomDecorator from @webflow/styled-components-utils

See more on pre-built decorators in the frameworks and libraries guide.

Custom decorators

Create custom decorators for error handling, analytics, or other cross-cutting concerns:

1
import "./globals.css";
2
import { errorBoundaryDecorator } from "./ErrorBoundary";
3
4
export const decorators = [errorBoundaryDecorator];

Apply decorators to a single component

To apply decorators to a single component, add a decorators property to the declareComponent configuration object.

1
import { declareComponent } from '@webflow/react';
2
import { Button } from './Button';
3
import { errorBoundaryDecorator } from "./ErrorBoundary";
4
5
export default declareComponent({Button,{
6
  name: "Button",
7
  decorators: [errorBoundaryDecorator],
8
});

Learn more in the component decorators documentation.