# @enonic/react-components

> Library of React components for handling Enonic XP data and page components

Latest version **6.1.2** (published 2026-09-01) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @enonic/react-components
pnpm add @enonic/react-components
yarn add @enonic/react-components
bun add @enonic/react-components
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.1.2 |
| Published | 2026-09-01 |
| First published | 2022-03-08 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 82.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 0 |
| Author | Enonic |
| Maintainers | sigdestad, alansemenov, edloidas, pmi |
| Keywords | enonic, react, components, RichText, Page, Region, Layout |

## Links

- npm: https://www.npmjs.com/package/@enonic/react-components
- Repository: https://github.com/enonic/npm-react-components
- Homepage: https://github.com/enonic/enonic-react-components
- Issues: https://github.com/enonic/npm-react-components/issues
- npm.io page: https://npm.io/package/@enonic/react-components

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 6.1.2 (latest) — 2026-09-01
- 7.1.0-beta.2 (beta) — 2026-10-27
- 7.1.0-beta.1 — 2026-09-21
- 7.0.0 — 2026-06-18
- 7.0.0-rc.3 — 2026-06-18
- 7.0.0-rc.2 — 2026-06-15
- 7.0.0-rc.1 — 2026-06-08
- 7.0.0-B1 — 2026-05-06
- 6.1.1 — 2026-02-09
- 6.1.0 — 2026-01-09
- 6.1.0-A1 — 2025-12-18
- 6.0.0 — 2025-08-19
- 6.0.0-RC5 — 2025-08-07
- 6.0.0-RC4 — 2025-07-14
- 6.0.0-RC3 — 2025-07-04
- … 29 more at https://npm.io/package/@enonic/react-components/versions

## README

# Enonic React Components

Library of React components for handling Enonic XP data.

## Install

```console
npm install --save @enonic/react-components
```

## ComponentRegistry

The `ComponentRegistry` is used to register View components for parts, layouts, pages, macros, and content types. Registered components are then resolved and rendered by the corresponding `Base*` components.

```typescript
import {ComponentRegistry} from '@enonic/react-components';

const componentRegistry = new ComponentRegistry();

componentRegistry.addPart('com.enonic.app.myapp:mypart', {
  View: MyPartView
});

componentRegistry.addLayout('com.enonic.app.myapp:mylayout', {
  View: MyLayoutView
});

componentRegistry.addPage('com.enonic.app.myapp:mypage', {
  View: MyPageView
});

componentRegistry.addMacro('mymacro', {
  View: MyMacroView
});

componentRegistry.addContentType('com.enonic.app.myapp:mycontenttype', {
  View: MyContentTypeView
});
```

Registered components receive `ComponentProps`:

```typescript
import type {ComponentProps} from '@enonic/react-components';

function MyPartView({component, data, common, meta}: ComponentProps) {
  return <div>{/* render part */}</div>;
}
```

## Base Components

The `BaseComponent` resolves the component type and delegates rendering to the appropriate base component (`BasePart`, `BaseLayout`, `BasePage`, `BaseText`, `BaseContentType`). Each base component looks up the registered View in the `ComponentRegistry` using the component descriptor.

```typescript
import {BaseComponent} from '@enonic/react-components';

<BaseComponent component={component} data={data} meta={meta} common={common} />
```

The `meta` prop carries context including the `componentRegistry` and request `mode`:

```typescript
import type {MetaData} from '@enonic/react-components';

const meta: MetaData = {
  type: 'portal:site',
  id: 'content-id',
  path: '/mysite',
  mode: 'live',
  componentRegistry,
};
```

## Regions

The `Regions` and `Region` components render Enonic XP regions containing page components.

```typescript
import {Regions} from '@enonic/react-components';

function MyPageView({component, data, common, meta}: ComponentProps) {
  return (
    <div>
      <Regions component={component} meta={meta} common={common} />
    </div>
  );
}
```

`Region` can also be used directly for more control:

```typescript
import {Region} from '@enonic/react-components';

<Region
  name="main"
  data={regionComponents}
  meta={meta}
  as="main"
  className="my-region"
/>
```

## RichText

The `RichText` component renders processed HTML from Enonic XP, with support for custom Image, Link, and Macro replacers.

```typescript
import type {RichTextData, RichTextMetaData, PartData} from '@enonic/react-components';
import {RichText} from '@enonic/react-components';

const meta: RichTextMetaData = {
  type: 'portal:site',
  id: 'content-id',
  path: '/mysite',
  mode: 'live',
};

const component: PartData = {
  descriptor: 'com.enonic.app.myapp:mypart',
  path: '/main/0',
  type: 'part',
};

const data: RichTextData = {
  processedHtml: '<p>Hello World</p>',
  macros: [],
  images: [],
  links: [],
};

<RichText data={data} meta={meta} component={component} />
```

### Custom tag and className

```typescript
<RichText
  data={data}
  meta={meta}
  component={component}
  tag="article"
  className="rich-text"
/>
```

### Custom Image, Link, and Macro components

You can override the default Image, Link, and Macro components. Extra props are forwarded to the custom components via the generic `RestProps` type parameter.

```typescript
import type {
  ImageComponent,
  LinkComponent,
  MacroComponent,
} from '@enonic/react-components';
import {RichText} from '@enonic/react-components';

const MyImage: ImageComponent = ({alt, src, srcSet, sizes, style}) => {
  return <img alt={alt} src={src} srcSet={srcSet} sizes={sizes} style={style} />;
};

const MyLink: LinkComponent = ({content, media, uri, ...aProps}) => {
  return <a {...aProps} />;
};

interface RestProps {
  myCustomProp: string;
}

const MyMacro: MacroComponent<RestProps> = ({component, meta, children, myCustomProp}) => {
  return <div>{children}</div>;
};

<RichText<RestProps>
  data={data}
  meta={meta}
  component={component}
  Image={MyImage}
  Link={MyLink}
  Macro={MyMacro}
  myCustomProp="value"
/>
```

### Custom replacer

For full control over how DOM nodes are replaced, provide a `replacer` function:

```typescript
import type {Replacer} from '@enonic/react-components';

const myReplacer: Replacer = ({el, data, component, meta}) => {
  if (el.attribs?.['class'] === 'custom') {
    return <div className="replaced" />;
  }
};

<RichText data={data} meta={meta} component={component} replacer={myReplacer} />
```

---
_Source: https://npm.io/package/@enonic/react-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._