# @acoustic-content-sdk/react-hbs-edit

> Module to attach inline-edit functionality to an WCH based Angular application.

Latest version **9.0.10076** (published 2020-03-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @acoustic-content-sdk/react-hbs-edit
pnpm add @acoustic-content-sdk/react-hbs-edit
yarn add @acoustic-content-sdk/react-hbs-edit
bun add @acoustic-content-sdk/react-hbs-edit
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 9.0.10076 |
| Published | 2020-03-26 |
| First published | 2020-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 15 |
| Unpacked size | 546 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Carsten Leue |
| Maintainers | carstenleue, daherbst, jim.patrick, joe.john, kevintap, mburati, neelkanthpatel, orenaksakal |
| Keywords | acoustic, acoustic-content, react, sdk |

## Links

- npm: https://www.npmjs.com/package/@acoustic-content-sdk/react-hbs-edit
- npm.io page: https://npm.io/package/@acoustic-content-sdk/react-hbs-edit

## Dependencies (15)

- [@acoustic-content-sdk/api](https://npm.io/package/@acoustic-content-sdk/api.md) 9.0.10076
- [@acoustic-content-sdk/utils](https://npm.io/package/@acoustic-content-sdk/utils.md) 9.0.10076
- [@acoustic-content-sdk/edit-api](https://npm.io/package/@acoustic-content-sdk/edit-api.md) 9.0.10076
- [@acoustic-content-sdk/react-api](https://npm.io/package/@acoustic-content-sdk/react-api.md) 9.0.10076
- [@acoustic-content-sdk/react-utils](https://npm.io/package/@acoustic-content-sdk/react-utils.md) 9.0.10076
- [@acoustic-content-sdk/redux-store](https://npm.io/package/@acoustic-content-sdk/redux-store.md) 9.0.10076
- [@acoustic-content-sdk/component-api](https://npm.io/package/@acoustic-content-sdk/component-api.md) 9.0.10076
- [@acoustic-content-sdk/redux-feature-auth-type](https://npm.io/package/@acoustic-content-sdk/redux-feature-auth-type.md) 9.0.10076
- [@acoustic-content-sdk/redux-feature-edit-mode](https://npm.io/package/@acoustic-content-sdk/redux-feature-edit-mode.md) 9.0.10076
- [@acoustic-content-sdk/redux-feature-handlebars](https://npm.io/package/@acoustic-content-sdk/redux-feature-handlebars.md) 9.0.10076
- [@acoustic-content-sdk/redux-feature-url-config](https://npm.io/package/@acoustic-content-sdk/redux-feature-url-config.md) 9.0.10076
- [@acoustic-content-sdk/redux-feature-auth-layout](https://npm.io/package/@acoustic-content-sdk/redux-feature-auth-layout.md) 9.0.10076
- [@acoustic-content-sdk/redux-feature-auth-content](https://npm.io/package/@acoustic-content-sdk/redux-feature-auth-content.md) 9.0.10076
- [@acoustic-content-sdk/redux-feature-delivery-content](https://npm.io/package/@acoustic-content-sdk/redux-feature-delivery-content.md) 9.0.10076
- [@acoustic-content-sdk/redux-feature-auth-layout-mapping](https://npm.io/package/@acoustic-content-sdk/redux-feature-auth-layout-mapping.md) 9.0.10076

## 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

- 9.0.10076 (latest) — 2020-03-26
- 9.0.10067 — 2020-03-25
- 9.0.10040 — 2020-03-20
- 9.0.10034 — 2020-03-20
- 9.0.495 — 2020-03-09
- 9.0.493 — 2020-03-08
- 9.0.462 — 2020-03-05
- 9.0.407 — 2020-02-28
- 9.0.384 — 2020-02-25
- 9.0.361 — 2020-02-21
- 9.0.360 — 2020-02-21
- 9.0.271 — 2020-02-11
- 9.0.251 — 2020-02-07
- 9.0.242 — 2020-02-06
- 9.0.216 — 2020-02-03
- … 2 more at https://npm.io/package/@acoustic-content-sdk/react-hbs-edit/versions

## README

<a name="_b578f8b29bb70801b38547817728f3f5569a06868f2f8cf7ebc40f7e00337250"></a>
[![npm](https://img.shields.io/npm/v/@acoustic-content-sdk/react-hbs-edit.svg?style=flat-square)](https://www.npmjs.com/package/@acoustic-content-sdk/react-hbs-edit)

[API Documentation](#_eccb2567065d0ec4dc5f81f7c7e6d6e216a139f29d4a8e9c72a9ba7d7a6aa371)

<a name="_eccb2567065d0ec4dc5f81f7c7e6d6e216a139f29d4a8e9c72a9ba7d7a6aa371"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_ed4960f463d46f601ab2683740ec950e039d668021a19308f392c3ff7c0a423b) &gt; [@acoustic-content-sdk/react-hbs-edit](#_eccb2567065d0ec4dc5f81f7c7e6d6e216a139f29d4a8e9c72a9ba7d7a6aa371)

## react-hbs-edit package

Implementation of utility functions and react components that render the component based on handlebars templates and integrate with inline edit.

## Functions

|  Function | Description |
|  --- | --- |
|  [createHandlebarsComponent(aStore, aDeliveryContent, aEditService, aDoc, aLogSvc, aScheduler)](#_15bd198aa8fc8d799f5ff3f2f350efa81b1cb9b6087061718e83189e62cfcd5e) | Returns a React component that renders the content item passed into its properties. Markup elements annotated with inline edit controls will be registered with the inline edit service. |

## Interfaces

|  Interface | Description |
|  --- | --- |
|  [HandlebarsComponentProps](#_cabb248cb9f0ea33d55f284923a36fa5087a144008be64a3208fbe12c27eb5fc) | Property interface of the handlebars components |

## Variables

|  Variable | Description |
|  --- | --- |
|  [createMarkupRenderer](#_b60cbf5f0bcb6e0aff2860dd5f46d0e94d74ee2f8053c2784ba624b3a767273d) |  |
|  [VERSION](#_2e93bf0e34b9b6e944d42b775a69e14c02d4dfaa8c7e264bf12ba88076df6bbe) | Version and build number of the package |


<a name="_b578f8b29bb70801b38547817728f3f5569a06868f2f8cf7ebc40f7e00337250"></a>

<a name="_15bd198aa8fc8d799f5ff3f2f350efa81b1cb9b6087061718e83189e62cfcd5e"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_ed4960f463d46f601ab2683740ec950e039d668021a19308f392c3ff7c0a423b) &gt; [@acoustic-content-sdk/react-hbs-edit](#_eccb2567065d0ec4dc5f81f7c7e6d6e216a139f29d4a8e9c72a9ba7d7a6aa371) &gt; [createHandlebarsComponent](#_15bd198aa8fc8d799f5ff3f2f350efa81b1cb9b6087061718e83189e62cfcd5e)

## createHandlebarsComponent() function

Returns a React component that renders the content item passed into its properties. Markup elements annotated with inline edit controls will be registered with the inline edit service.

<b>Signature:</b>

```typescript
export declare function createHandlebarsComponent(aStore: ReduxRootStore, aDeliveryContent: DeliveryContentResolver, aEditService: WchInlineEditServiceV2, aDoc: Document, aLogSvc?: LoggerService, aScheduler?: SchedulerLike): ReactComponent<HandlebarsComponentProps>;
```

## Parameters

|  Parameter | Type | Description |
|  --- | --- | --- |
|  aStore | <code>ReduxRootStore</code> | the redux store that contains all metadata |
|  aDeliveryContent | <code>DeliveryContentResolver</code> |  |
|  aEditService | <code>WchInlineEditServiceV2</code> | the edit service |
|  aDoc | <code>Document</code> | the document, used to instantiate a template node |
|  aLogSvc | <code>LoggerService</code> | optionally a logger service |
|  aScheduler | <code>SchedulerLike</code> | optionally a scheduler |

<b>Returns:</b>

`ReactComponent<HandlebarsComponentProps>`

a component that renders a content item based on the handlebars templates from the redux store


<a name="_cabb248cb9f0ea33d55f284923a36fa5087a144008be64a3208fbe12c27eb5fc"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_ed4960f463d46f601ab2683740ec950e039d668021a19308f392c3ff7c0a423b) &gt; [@acoustic-content-sdk/react-hbs-edit](#_eccb2567065d0ec4dc5f81f7c7e6d6e216a139f29d4a8e9c72a9ba7d7a6aa371) &gt; [HandlebarsComponentProps](#_cabb248cb9f0ea33d55f284923a36fa5087a144008be64a3208fbe12c27eb5fc)

## HandlebarsComponentProps interface

Property interface of the handlebars components

<b>Signature:</b>

```typescript
export interface HandlebarsComponentProps 
```

## Properties

|  Property | Type | Description |
|  --- | --- | --- |
|  [contentItemId](#_5d8456cba8f234dbef81faa3f071f1c14496083f6f682933f142e9b3453d6715) | <code>string</code> | ID of the item to render |
|  [layoutMode](#_27fd3e698c9d068a9cd7cc68d11abc89de75e0a4c1ac61cbef95b60f1a0a214d) | <code>string</code> | Optional layout mode |


<a name="_b60cbf5f0bcb6e0aff2860dd5f46d0e94d74ee2f8053c2784ba624b3a767273d"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_ed4960f463d46f601ab2683740ec950e039d668021a19308f392c3ff7c0a423b) &gt; [@acoustic-content-sdk/react-hbs-edit](#_eccb2567065d0ec4dc5f81f7c7e6d6e216a139f29d4a8e9c72a9ba7d7a6aa371) &gt; [createMarkupRenderer](#_b60cbf5f0bcb6e0aff2860dd5f46d0e94d74ee2f8053c2784ba624b3a767273d)

## createMarkupRenderer variable

<b>Signature:</b>

```typescript
createMarkupRenderer: typeof createRendererV2
```

<a name="_2e93bf0e34b9b6e944d42b775a69e14c02d4dfaa8c7e264bf12ba88076df6bbe"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_ed4960f463d46f601ab2683740ec950e039d668021a19308f392c3ff7c0a423b) &gt; [@acoustic-content-sdk/react-hbs-edit](#_eccb2567065d0ec4dc5f81f7c7e6d6e216a139f29d4a8e9c72a9ba7d7a6aa371) &gt; [VERSION](#_2e93bf0e34b9b6e944d42b775a69e14c02d4dfaa8c7e264bf12ba88076df6bbe)

## VERSION variable

Version and build number of the package

<b>Signature:</b>

```typescript
VERSION: {
    version: {
        major: string;
        minor: string;
        patch: string;
        branch: string;
    };
    build: Date;
}
```

<a name="_5d8456cba8f234dbef81faa3f071f1c14496083f6f682933f142e9b3453d6715"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_ed4960f463d46f601ab2683740ec950e039d668021a19308f392c3ff7c0a423b) &gt; [@acoustic-content-sdk/react-hbs-edit](#_eccb2567065d0ec4dc5f81f7c7e6d6e216a139f29d4a8e9c72a9ba7d7a6aa371) &gt; [HandlebarsComponentProps](#_cabb248cb9f0ea33d55f284923a36fa5087a144008be64a3208fbe12c27eb5fc) &gt; [contentItemId](#_5d8456cba8f234dbef81faa3f071f1c14496083f6f682933f142e9b3453d6715)

## HandlebarsComponentProps.contentItemId property

ID of the item to render

<b>Signature:</b>

```typescript
contentItemId?: string;
```

<a name="_27fd3e698c9d068a9cd7cc68d11abc89de75e0a4c1ac61cbef95b60f1a0a214d"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_ed4960f463d46f601ab2683740ec950e039d668021a19308f392c3ff7c0a423b) &gt; [@acoustic-content-sdk/react-hbs-edit](#_eccb2567065d0ec4dc5f81f7c7e6d6e216a139f29d4a8e9c72a9ba7d7a6aa371) &gt; [HandlebarsComponentProps](#_cabb248cb9f0ea33d55f284923a36fa5087a144008be64a3208fbe12c27eb5fc) &gt; [layoutMode](#_27fd3e698c9d068a9cd7cc68d11abc89de75e0a4c1ac61cbef95b60f1a0a214d)

## HandlebarsComponentProps.layoutMode property

Optional layout mode

<b>Signature:</b>

```typescript
[KEY_LAYOUT_MODE]?: string;
```

---
_Source: https://npm.io/package/@acoustic-content-sdk/react-hbs-edit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._