# salla-hook (https://docs.salla.dev/twilight/react/web-components/salla-hook)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

An invisible marker (rendered with `display: none`) that names a position in the page where other code can inject elements.
A theme places it where extensions should be able to add content. On load it registers itself with `Salla.hooks` under the component name `salla-hook`,
and a caller can then use its `mount()` method to insert an element immediately before the marker.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-hook>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaHook } from '@salla.sa/twilight-components-react/hook';
```

## Example [#example]

```tsx
import { SallaHook } from '@salla.sa/twilight-components-react/hook';

export function Example() {
  return (
    <SallaHook name="product-page-after-price" />
  );
}
```

```html
<salla-hook name="product-page-after-price"></salla-hook>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                             | Type     | Default |
| -------- | --------- | ------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `name`   | `name`    | The unique name that identifies this hook position. Use a different name for each position on the page. | `string` |         |

## Methods [#methods]

Call these on the element or a React ref.

### `mount(element: HTMLElement) => Promise<void>` [#mountelement-htmlelement--promisevoid]

Inserts the given element into the DOM directly before this `salla-hook` element. Nothing is returned.

| Parameter | Type          | Description            |
| --------- | ------------- | ---------------------- |
| `element` | `HTMLElement` | The element to insert. |