> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Component Requirements

## Article: Component Requirements

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/component-requirements.md

## Article Content:

# Component Requirements

An Editor React Component (ERC) must connect its rendered DOM to the declarations in its manifest. These requirements let the editor select, style, and configure the component.

## Root element

Export a default React function component that accepts the standard `id` and `className` props. Apply both props to the component's root element.

The root element also needs a class that matches the manifest's `editorElement.selector`:

```tsx
interface TestimonialCardProps {
  id: string;
  className: string;
}

export default function TestimonialCard({
  id,
  className,
}: TestimonialCardProps) {
  return (
    <div id={id} className={`testimonial-card ${className}`}>
      {/* Component content */}
    </div>
  );
}
```

For details about the values the editor passes to the component, see [Runtime Props Reference](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/runtime-props-reference.md#standard-props).

## Component selection

The editor uses 2 values together to locate a component instance:

- The manifest's [`selector`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md) must match a class on the root element.
- The same root element must carry the `id` prop.

If either value is missing, the component can render without being selectable. The Wix user can't open its action bar or auto panels.

## Selectors

Manifest selectors are DOM query selectors. The editor runs them against the component's rendered output, so every selector must describe an element the component renders.

Follow these rules when writing selectors:

- **Match the rendered class.** CSS Modules rewrite class names at build time. Add a plain string class for the manifest to target alongside the CSS Modules class and the editor-provided `className`:

  ```tsx
  <div
    id={id}
    className={`testimonial-card ${className} ${styles.card}`}
  >
  ```

  In this example, `testimonial-card` reaches the DOM unchanged, so `selector: '.testimonial-card'` can match it.

- **Keep the root selector specific.** Selectors must be 4 to 50 characters. Name the root class after the component, such as `.testimonial-card`, to avoid collisions with other components on the page.
- **Prefer classes.** Tag and attribute selectors can match too broadly, while a class can identify the intended root or inner element directly.
- **Keep the component and manifest aligned.** If you rename a class, update the corresponding selector in the manifest.

## Inner elements and data

Add a class to each inner element that the manifest targets, and make its class match the corresponding [`elements`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/elements.md) selector.

Data prop names in the component must also match the keys in the manifest's [`data`](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md) declaration.

## See also

- [About Editor React Components](https://dev.wix.com/docs/site-extensions/editor-react-components/about-editor-react-components.md)
- [About the Editor React Component Manifest](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/about-the-editor-react-component-manifest.md)
- [Editor Element](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/editor-element.md)
- [Runtime Props Reference](https://dev.wix.com/docs/site-extensions/editor-react-components/manifest-reference/runtime-props-reference.md)