# Myop SDK Reference
> Canonical host: https://docs.myop.dev
> All Myop SDK API documentation in a single Markdown file.
> Generated from TypeScript sources via TypeDoc, then concatenated.
> URLs below are site-relative.
## Contents (jump points)
| Package | Pages | Grep to jump |
|---|---|---|
| **@myop/sdk** — core SDK (host, iframe, web component, messages, helpers, common) | 184 | `Source: /docs/sdk/` |
| **@myop/react** — React host | 18 | `Source: /docs/sdk-react/` |
| **@myop/react-native** — React Native host | 19 | `Source: /docs/sdk-react-native/` |
| **@myop/vue** — Vue host | 10 | `Source: /docs/sdk-vue/` |
| **@myop/angular** — Angular host | 16 | `Source: /docs/sdk-angular/` |
Tip: each page below starts with a `Source:` line. Grep for one of the
prefixes in the rightmost column to skip directly to that package's pages.
---
# Class: IframeSDK
Source: /docs/sdk/Iframe/IframeSDK/classes/IframeSDK
Defined in: [Iframe/IframeSDK.ts:61](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L61)
The Iframe SDK is intended for scenarios where developers wish to implement Myop components as separate web applications hosted within iframes.
By importing the Iframe SDK, developers gain access to tools and utilities necessary for handling communication between the host application and the embedded iframe-based Myop components
This SDK facilitates secure isolation, allowing components to function independently while still benefiting from the overall structure and management capabilities provided by the host application.
Once loaded the `RootSDK`, you can load the `IframeSDK`
```js
const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());
```
or
```ts
import {getIframeModule} from '@myop/sdk';
const {IframeSDK} = (await getIframeModule());
```
## Extends
- [`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK)
## Constructors
### new IframeSDK()
> **new IframeSDK**(): [`IframeSDK`](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)
Defined in: [Iframe/IframeSDK.ts:65](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L65)
#### Returns
[`IframeSDK`](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)
#### Overrides
[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`constructor`](/docs/sdk/common/classes/BaseMyopSDK#constructors)
## Properties
### alwaysPassEnvelopesToHost
> **alwaysPassEnvelopesToHost**: `boolean` = `false`
Defined in: [common/BaseMyopSDK.ts:53](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L53)
#### Inherited from
[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`alwaysPassEnvelopesToHost`](/docs/sdk/common/classes/BaseMyopSDK#alwayspassenvelopestohost)
***
### components
> **components**: `Record`\<`string`, [`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\> = `{}`
Defined in: [common/BaseMyopSDK.ts:51](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L51)
#### Inherited from
[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`components`](/docs/sdk/common/classes/BaseMyopSDK#components)
***
### messageCleanupCache
> **messageCleanupCache**: `Promise`\<`void`\> \| `Record`\<`string`, [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler) \| `Promise`\<[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)\>\> = `{}`
Defined in: [common/BaseMyopSDK.ts:55](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L55)
#### Inherited from
[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`messageCleanupCache`](/docs/sdk/common/classes/BaseMyopSDK#messagecleanupcache)
***
### messageToHandleAfterInit
> **messageToHandleAfterInit**: [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)[] = `[]`
Defined in: [common/BaseMyopSDK.ts:49](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L49)
#### Inherited from
[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`messageToHandleAfterInit`](/docs/sdk/common/classes/BaseMyopSDK#messagetohandleafterinit)
***
### supportedHandlers
> **supportedHandlers**: [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)[]
Defined in: [Iframe/IframeSDK.ts:100](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L100)
#### Overrides
[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`supportedHandlers`](/docs/sdk/common/classes/BaseMyopSDK#supportedhandlers)
***
### version
> **version**: `any`
Defined in: [Iframe/IframeSDK.ts:63](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L63)
## Methods
### handleIncomeMessages()
> **handleIncomeMessages**(`event`): `void`
Defined in: [common/BaseMyopSDK.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L57)
#### Parameters
##### event
`any`
#### Returns
`void`
#### Inherited from
[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK).[`handleIncomeMessages`](/docs/sdk/common/classes/BaseMyopSDK#handleincomemessages)
***
### init()
> **init**(): `void`
Defined in: [Iframe/IframeSDK.ts:117](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L117)
#### Returns
`void`
#### Overrides
`BaseMyopSDK.init`
***
### messageToHost()
> **messageToHost**(`message`, `replayTo`?): `void`
Defined in: [Iframe/IframeSDK.ts:76](https://github.com/hadarge/myop/blob/main/myop-sdk/src/Iframe/IframeSDK.ts#L76)
#### Parameters
##### message
[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)
##### replayTo?
[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)
#### Returns
`void`
#### Overrides
`BaseMyopSDK.messageToHost`
---
# Iframe/IframeSDK
Source: /docs/sdk/Iframe/IframeSDK
The Iframe SDK is intended for scenarios where developers wish to implement Myop components as separate web applications hosted within iframes.
By importing the Iframe SDK, developers gain access to tools and utilities necessary for handling communication between the host application and the embedded iframe-based Myop components
This SDK facilitates secure isolation, allowing components to function independently while still benefiting from the overall structure and management capabilities provided by the host application.
Once loaded the `RootSDK`, you can load the `IframeSDK`
```js
const {IframeSDK} = (await window.myop.rootSDK.getIframeModule());
```
or
```ts
import {getIframeModule} from '@myop/sdk';
const {IframeSDK} = (await getIframeModule());
```
or
```ts
import {IframeSDK} from '@myop/sdk/iframe';
```
## Classes
- [IframeSDK](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)
---
# Iframe
Source: /docs/sdk/Iframe
## References
### IframeSDK
Re-exports [IframeSDK](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)
---
# Class: `abstract` BaseContextMessageHandler\
Source: /docs/sdk/common/classes/BaseContextMessageHandler
Defined in: [common/baseMessageHandler.ts:45](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L45)
## Extends
- [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)\<`T`\>
## Type Parameters
• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage) = `any`
• **E** = `any`
## Constructors
### new BaseContextMessageHandler()
> **new BaseContextMessageHandler**\<`T`, `E`\>(`messageToHost`, `context`?): [`BaseContextMessageHandler`](/docs/sdk/common/classes/BaseContextMessageHandler)\<`T`, `E`\>
Defined in: [common/baseMessageHandler.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L46)
#### Parameters
##### messageToHost
(`message`, `replayTo`?) => `void`
##### context?
`E`
#### Returns
[`BaseContextMessageHandler`](/docs/sdk/common/classes/BaseContextMessageHandler)\<`T`, `E`\>
#### Overrides
[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler).[`constructor`](/docs/sdk/common/classes/BaseMessageHandler#constructors)
## Properties
### context?
> `optional` **context**: `E`
Defined in: [common/baseMessageHandler.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L46)
***
### executor
> `abstract` **executor**: `IMessageExecutor`\<`T`\>
Defined in: [common/baseMessageHandler.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L42)
#### Inherited from
[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler).[`executor`](/docs/sdk/common/classes/BaseMessageHandler#executor)
***
### messageToHost()
> **messageToHost**: (`message`, `replayTo`?) => `void`
Defined in: [common/baseMessageHandler.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L46)
#### Parameters
##### message
[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)
##### replayTo?
[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)
#### Returns
`void`
#### Inherited from
[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler).[`messageToHost`](/docs/sdk/common/classes/BaseMessageHandler#messagetohost-1)
***
### messageType
> `abstract` **messageType**: `MyopMessageKey`
Defined in: [common/baseMessageHandler.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L41)
#### Inherited from
[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler).[`messageType`](/docs/sdk/common/classes/BaseMessageHandler#messagetype)
---
# Class: `abstract` BaseMessageHandler\
Source: /docs/sdk/common/classes/BaseMessageHandler
Defined in: [common/baseMessageHandler.ts:33](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L33)
## Extended by
- [`BaseContextMessageHandler`](/docs/sdk/common/classes/BaseContextMessageHandler)
## Type Parameters
• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage) = `any`
## Implements
- `IMessageHandler`\<`T`\>
## Constructors
### new BaseMessageHandler()
> **new BaseMessageHandler**\<`T`\>(`messageToHost`): [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)\<`T`\>
Defined in: [common/baseMessageHandler.ts:37](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L37)
#### Parameters
##### messageToHost
(`message`, `replayTo`?) => `void`
#### Returns
[`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)\<`T`\>
## Properties
### executor
> `abstract` **executor**: `IMessageExecutor`\<`T`\>
Defined in: [common/baseMessageHandler.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L42)
#### Implementation of
`IMessageHandler.executor`
***
### messageToHost()
> **messageToHost**: (`message`, `replayTo`?) => `void`
Defined in: [common/baseMessageHandler.ts:37](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L37)
#### Parameters
##### message
[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)
##### replayTo?
[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)
#### Returns
`void`
#### Implementation of
`IMessageHandler.messageToHost`
***
### messageType
> `abstract` **messageType**: `MyopMessageKey`
Defined in: [common/baseMessageHandler.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L41)
#### Implementation of
`IMessageHandler.messageType`
---
# Class: `abstract` BaseMyopSDK
Source: /docs/sdk/common/classes/BaseMyopSDK
Defined in: [common/BaseMyopSDK.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L43)
## Extended by
- [`IframeSDK`](/docs/sdk/Iframe/IframeSDK/classes/IframeSDK)
- [`WebComponentSDK`](/docs/sdk/webcomponent/WebComponentSDK/classes/WebComponentSDK)
## Implements
- [`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK)
## Constructors
### new BaseMyopSDK()
> **new BaseMyopSDK**(): [`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK)
#### Returns
[`BaseMyopSDK`](/docs/sdk/common/classes/BaseMyopSDK)
## Properties
### alwaysPassEnvelopesToHost
> **alwaysPassEnvelopesToHost**: `boolean` = `false`
Defined in: [common/BaseMyopSDK.ts:53](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L53)
***
### components
> **components**: `Record`\<`string`, [`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\> = `{}`
Defined in: [common/BaseMyopSDK.ts:51](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L51)
#### Implementation of
[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`components`](/docs/sdk/common/interfaces/IMyopSDK#components)
***
### init()
> `abstract` **init**: () => `void`
Defined in: [common/BaseMyopSDK.ts:197](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L197)
#### Returns
`void`
#### Implementation of
[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`init`](/docs/sdk/common/interfaces/IMyopSDK#init)
***
### messageCleanupCache
> **messageCleanupCache**: `Promise`\<`void`\> \| `Record`\<`string`, [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler) \| `Promise`\<[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)\>\> = `{}`
Defined in: [common/BaseMyopSDK.ts:55](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L55)
***
### messageToHandleAfterInit
> **messageToHandleAfterInit**: [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)[] = `[]`
Defined in: [common/BaseMyopSDK.ts:49](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L49)
***
### messageToHost()
> `abstract` **messageToHost**: (`message`, `replayTo`?) => `void`
Defined in: [common/BaseMyopSDK.ts:45](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L45)
#### Parameters
##### message
[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)
##### replayTo?
[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)
#### Returns
`void`
#### Implementation of
[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`messageToHost`](/docs/sdk/common/interfaces/IMyopSDK#messagetohost)
***
### supportedHandlers
> `abstract` **supportedHandlers**: [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)[]
Defined in: [common/BaseMyopSDK.ts:47](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L47)
#### Implementation of
[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`supportedHandlers`](/docs/sdk/common/interfaces/IMyopSDK#supportedhandlers)
## Methods
### handleIncomeMessages()
> **handleIncomeMessages**(`event`): `void`
Defined in: [common/BaseMyopSDK.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L57)
#### Parameters
##### event
`any`
#### Returns
`void`
#### Implementation of
[`IMyopSDK`](/docs/sdk/common/interfaces/IMyopSDK).[`handleIncomeMessages`](/docs/sdk/common/interfaces/IMyopSDK#handleincomemessages)
---
# Class: HostedComponent\
Source: /docs/sdk/common/classes/HostedComponent
Defined in: [common/BaseMyopSDK.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L13)
## Type Parameters
• **T** = `any`
## Constructors
### new HostedComponent()
> **new HostedComponent**\<`T`\>(`id`, `context`?): [`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\<`T`\>
Defined in: [common/BaseMyopSDK.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L20)
#### Parameters
##### id
`string`
##### context?
`T`
#### Returns
[`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\<`T`\>
## Properties
### context?
> `optional` **context**: `T`
Defined in: [common/BaseMyopSDK.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L20)
***
### id
> **id**: `string`
Defined in: [common/BaseMyopSDK.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L20)
## Methods
### send()
> **send**(`message`): `void`
Defined in: [common/BaseMyopSDK.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L14)
#### Parameters
##### message
[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Returns
`void`
---
# Class: MyopElementRef
Source: /docs/sdk/common/classes/MyopElementRef
Defined in: [common/MyopElementRef.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L22)
## Implements
- [`IElementRef`](/docs/sdk/common/interfaces/IElementRef)
## Constructors
### new MyopElementRef()
> **new MyopElementRef**(`myopId`, `htmlTagName`, `BoundingRect`?, `offsetTop`?, `offsetLeft`?): [`MyopElementRef`](/docs/sdk/common/classes/MyopElementRef)
Defined in: [common/MyopElementRef.ts:23](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L23)
#### Parameters
##### myopId
`string`
##### htmlTagName
`string`
##### BoundingRect?
`DOMRect`
##### offsetTop?
`number`
##### offsetLeft?
`number`
#### Returns
[`MyopElementRef`](/docs/sdk/common/classes/MyopElementRef)
## Properties
### BoundingRect?
> `optional` **BoundingRect**: `DOMRect`
Defined in: [common/MyopElementRef.ts:25](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L25)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`BoundingRect`](/docs/sdk/common/interfaces/IElementRef#boundingrect)
***
### htmlTagName
> **htmlTagName**: `string`
Defined in: [common/MyopElementRef.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L24)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`htmlTagName`](/docs/sdk/common/interfaces/IElementRef#htmltagname)
***
### myopId
> **myopId**: `string`
Defined in: [common/MyopElementRef.ts:23](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L23)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`myopId`](/docs/sdk/common/interfaces/IElementRef#myopid)
***
### offsetLeft?
> `optional` **offsetLeft**: `number`
Defined in: [common/MyopElementRef.ts:27](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L27)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`offsetLeft`](/docs/sdk/common/interfaces/IElementRef#offsetleft)
***
### offsetTop?
> `optional` **offsetTop**: `number`
Defined in: [common/MyopElementRef.ts:26](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L26)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`offsetTop`](/docs/sdk/common/interfaces/IElementRef#offsettop)
***
### type
> `readonly` **type**: `string` = `'MyopElementRef'`
Defined in: [common/MyopElementRef.ts:31](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L31)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`type`](/docs/sdk/common/interfaces/IElementRef#type)
---
# Class: RefBehaviorType
Source: /docs/sdk/common/classes/RefBehaviorType
Defined in: [common/index.ts:169](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L169)
## Constructors
### new RefBehaviorType()
> **new RefBehaviorType**(): [`RefBehaviorType`](/docs/sdk/common/classes/RefBehaviorType)
#### Returns
[`RefBehaviorType`](/docs/sdk/common/classes/RefBehaviorType)
## Properties
### code
> `static` **code**: `"code"`
Defined in: [common/index.ts:170](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L170)
***
### component
> `static` **component**: `"component"`
Defined in: [common/index.ts:171](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L171)
---
# Class: RootRef
Source: /docs/sdk/common/classes/RootRef
Defined in: [common/index.ts:493](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L493)
## Constructors
### new RootRef()
> **new RootRef**(`container`, `shadowRoot`?): [`RootRef`](/docs/sdk/common/classes/RootRef)
Defined in: [common/index.ts:494](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L494)
#### Parameters
##### container
`HTMLElement`
##### shadowRoot?
`ShadowRoot`
#### Returns
[`RootRef`](/docs/sdk/common/classes/RootRef)
## Properties
### container
> **container**: `HTMLElement`
Defined in: [common/index.ts:494](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L494)
***
### shadowRoot?
> `optional` **shadowRoot**: `ShadowRoot`
Defined in: [common/index.ts:494](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L494)
## Methods
### getRoot()
> **getRoot**(): `HTMLElement` \| `ShadowRoot`
Defined in: [common/index.ts:502](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L502)
#### Returns
`HTMLElement` \| `ShadowRoot`
***
### getRootDiv()
> **getRootDiv**(): `null` \| `HTMLDivElement`
Defined in: [common/index.ts:498](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L498)
#### Returns
`null` \| `HTMLDivElement`
---
# Class: XPathElementRef
Source: /docs/sdk/common/classes/XPathElementRef
Defined in: [common/MyopElementRef.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L11)
## Implements
- [`IElementRef`](/docs/sdk/common/interfaces/IElementRef)
## Constructors
### new XPathElementRef()
> **new XPathElementRef**(`xPath`, `htmlTagName`, `BoundingRect`?, `offsetTop`?, `offsetLeft`?): [`XPathElementRef`](/docs/sdk/common/classes/XPathElementRef)
Defined in: [common/MyopElementRef.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L12)
#### Parameters
##### xPath
`string`
##### htmlTagName
`string`
##### BoundingRect?
`DOMRect`
##### offsetTop?
`number`
##### offsetLeft?
`number`
#### Returns
[`XPathElementRef`](/docs/sdk/common/classes/XPathElementRef)
## Properties
### BoundingRect?
> `optional` **BoundingRect**: `DOMRect`
Defined in: [common/MyopElementRef.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L14)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`BoundingRect`](/docs/sdk/common/interfaces/IElementRef#boundingrect)
***
### htmlTagName
> **htmlTagName**: `string`
Defined in: [common/MyopElementRef.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L13)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`htmlTagName`](/docs/sdk/common/interfaces/IElementRef#htmltagname)
***
### offsetLeft?
> `optional` **offsetLeft**: `number`
Defined in: [common/MyopElementRef.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L16)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`offsetLeft`](/docs/sdk/common/interfaces/IElementRef#offsetleft)
***
### offsetTop?
> `optional` **offsetTop**: `number`
Defined in: [common/MyopElementRef.ts:15](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L15)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`offsetTop`](/docs/sdk/common/interfaces/IElementRef#offsettop)
***
### type
> `readonly` **type**: `string` = `'XPathElementRef'`
Defined in: [common/MyopElementRef.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L19)
#### Implementation of
[`IElementRef`](/docs/sdk/common/interfaces/IElementRef).[`type`](/docs/sdk/common/interfaces/IElementRef#type)
***
### xPath
> **xPath**: `string`
Defined in: [common/MyopElementRef.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L12)
---
# Function: runExecutorCleanup()
Source: /docs/sdk/common/functions/runExecutorCleanup
> **runExecutorCleanup**(`task`): `Promise`\<`void`\>
Defined in: [common/baseMessageHandler.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L7)
## Parameters
### task
[`IMessageExecutorCleanup`](/docs/sdk/common/type-aliases/IMessageExecutorCleanup)
## Returns
`Promise`\<`void`\>
---
# common
Source: /docs/sdk/common
## Classes
- [BaseContextMessageHandler](/docs/sdk/common/classes/BaseContextMessageHandler)
- [BaseMessageHandler](/docs/sdk/common/classes/BaseMessageHandler)
- [BaseMyopSDK](/docs/sdk/common/classes/BaseMyopSDK)
- [HostedComponent](/docs/sdk/common/classes/HostedComponent)
- [MyopElementRef](/docs/sdk/common/classes/MyopElementRef)
- [RefBehaviorType](/docs/sdk/common/classes/RefBehaviorType)
- [RootRef](/docs/sdk/common/classes/RootRef)
- [XPathElementRef](/docs/sdk/common/classes/XPathElementRef)
## Interfaces
- [ComponentAccess](/docs/sdk/common/interfaces/ComponentAccess)
- [IABExperience](/docs/sdk/common/interfaces/IABExperience)
- [IBindMessagePropConfig](/docs/sdk/common/interfaces/IBindMessagePropConfig)
- [ICodeRefBehavior](/docs/sdk/common/interfaces/ICodeRefBehavior)
- [IComponentConfig](/docs/sdk/common/interfaces/IComponentConfig)
- [IComponentDefinitionConfig](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
- [IComponentInstanceConfig](/docs/sdk/common/interfaces/IComponentInstanceConfig)
- [IComponentRefBehavior](/docs/sdk/common/interfaces/IComponentRefBehavior)
- [IDateRange](/docs/sdk/common/interfaces/IDateRange)
- [IDedicatedSkinConfig](/docs/sdk/common/interfaces/IDedicatedSkinConfig)
- [IDefaultSkinConfig](/docs/sdk/common/interfaces/IDefaultSkinConfig)
- [IElementRef](/docs/sdk/common/interfaces/IElementRef)
- [IExperience](/docs/sdk/common/interfaces/IExperience)
- [IExperienceABSplit](/docs/sdk/common/interfaces/IExperienceABSplit)
- [IExperienceABSplitVersion](/docs/sdk/common/interfaces/IExperienceABSplitVersion)
- [IExperienceDefinitionConfig](/docs/sdk/common/interfaces/IExperienceDefinitionConfig)
- [IExperienceSegment](/docs/sdk/common/interfaces/IExperienceSegment)
- [IExperienceSegmentRule](/docs/sdk/common/interfaces/IExperienceSegmentRule)
- [IFunctionResultsSegment](/docs/sdk/common/interfaces/IFunctionResultsSegment)
- [IHTMLLoaderConfig](/docs/sdk/common/interfaces/IHTMLLoaderConfig)
- [IIframeLoaderConfig](/docs/sdk/common/interfaces/IIframeLoaderConfig)
- [IMessagePropConfig](/docs/sdk/common/interfaces/IMessagePropConfig)
- [IMinimizedLoaderConfig](/docs/sdk/common/interfaces/IMinimizedLoaderConfig)
- [IMyopSDK](/docs/sdk/common/interfaces/IMyopSDK)
- [IPropBehavior](/docs/sdk/common/interfaces/IPropBehavior)
- [IPropCodeBehavior](/docs/sdk/common/interfaces/IPropCodeBehavior)
- [IPropConfig](/docs/sdk/common/interfaces/IPropConfig)
- [IPropMessageBehavior](/docs/sdk/common/interfaces/IPropMessageBehavior)
- [IPropMessageBehaviorParam](/docs/sdk/common/interfaces/IPropMessageBehaviorParam)
- [IRefBehavior](/docs/sdk/common/interfaces/IRefBehavior)
- [IRefConfig](/docs/sdk/common/interfaces/IRefConfig)
- [ISegmentDefinition](/docs/sdk/common/interfaces/ISegmentDefinition)
- [ISegmentedSkinConfig](/docs/sdk/common/interfaces/ISegmentedSkinConfig)
- [ISegmentExperience](/docs/sdk/common/interfaces/ISegmentExperience)
- [ISegmentInstance](/docs/sdk/common/interfaces/ISegmentInstance)
- [ISkinConfig](/docs/sdk/common/interfaces/ISkinConfig)
- [ISkinInstanceConfig](/docs/sdk/common/interfaces/ISkinInstanceConfig)
- [ISkinLoaderConfig](/docs/sdk/common/interfaces/ISkinLoaderConfig)
- [ISkinSelectorConfig](/docs/sdk/common/interfaces/ISkinSelectorConfig)
- [IUserFlow](/docs/sdk/common/interfaces/IUserFlow)
- [IUserFlowDefinition](/docs/sdk/common/interfaces/IUserFlowDefinition)
- [IWebComponentLoaderConfig](/docs/sdk/common/interfaces/IWebComponentLoaderConfig)
- [v2\_IBaseMyopObject](/docs/sdk/common/interfaces/v2_IBaseMyopObject)
- [v2\_IComponentDefinitionConfig](/docs/sdk/common/interfaces/v2_IComponentDefinitionConfig)
- [v2\_IDTO](/docs/sdk/common/interfaces/v2_IDTO)
- [v2\_IMyopStoredObject](/docs/sdk/common/interfaces/v2_IMyopStoredObject)
- [v2\_IReleaseMetadata](/docs/sdk/common/interfaces/v2_IReleaseMetadata)
- [v2\_ISkinConfig](/docs/sdk/common/interfaces/v2_ISkinConfig)
- [v2\_IVariantConfig](/docs/sdk/common/interfaces/v2_IVariantConfig)
## Type Aliases
- [CleanupHandler](/docs/sdk/common/type-aliases/CleanupHandler)
- [Dictionary](/docs/sdk/common/type-aliases/Dictionary)
- [IDashboard](/docs/sdk/common/type-aliases/IDashboard)
- [IMessageExecutorCleanup](/docs/sdk/common/type-aliases/IMessageExecutorCleanup)
- [IRefBehaviorType](/docs/sdk/common/type-aliases/IRefBehaviorType)
- [LoaderFrameworkType](/docs/sdk/common/type-aliases/LoaderFrameworkType)
- [PropType](/docs/sdk/common/type-aliases/PropType)
- [RefSelectorType](/docs/sdk/common/type-aliases/RefSelectorType)
- [SkinLoaderType](/docs/sdk/common/type-aliases/SkinLoaderType)
## Variables
- [ExperienceTypes](/docs/sdk/common/variables/ExperienceTypes)
- [LoaderFrameworks](/docs/sdk/common/variables/LoaderFrameworks)
- [PropConfigBehaviorTypes](/docs/sdk/common/variables/PropConfigBehaviorTypes)
- [PropMessageModes](/docs/sdk/common/variables/PropMessageModes)
- [SegmentType](/docs/sdk/common/variables/SegmentType)
- [ShadowRootModeType](/docs/sdk/common/variables/ShadowRootModeType)
- [SkinLoaders](/docs/sdk/common/variables/SkinLoaders)
- [SkinSelectorTypes](/docs/sdk/common/variables/SkinSelectorTypes)
## Functions
- [runExecutorCleanup](/docs/sdk/common/functions/runExecutorCleanup)
---
# Interface: ComponentAccess
Source: /docs/sdk/common/interfaces/ComponentAccess
Defined in: [common/index.ts:289](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L289)
## Properties
### marketplace?
> `optional` **marketplace**: `object`
Defined in: [common/index.ts:294](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L294)
#### contactEmail
> **contactEmail**: `string`
#### deadline
> **deadline**: `string`
#### description
> **description**: `string`
#### status
> **status**: `"closed"` \| `"draft"` \| `"submitted"` \| `"claimed"`
***
### unlisted?
> `optional` **unlisted**: `object`
Defined in: [common/index.ts:291](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L291)
#### slug
> **slug**: `string`
***
### visibility
> **visibility**: `"private"` \| `"unlisted"` \| `"public"`
Defined in: [common/index.ts:290](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L290)
---
# Interface: IABExperience
Source: /docs/sdk/common/interfaces/IABExperience
Defined in: [common/index.ts:447](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L447)
## Extends
- [`IExperience`](/docs/sdk/common/interfaces/IExperience)
## Properties
### description
> **description**: `string`
Defined in: [common/index.ts:434](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L434)
#### Inherited from
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`description`](/docs/sdk/common/interfaces/IExperience#description)
***
### experiences
> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]
Defined in: [common/index.ts:450](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L450)
#### Overrides
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`experiences`](/docs/sdk/common/interfaces/IExperience#experiences)
***
### id
> **id**: `string`
Defined in: [common/index.ts:432](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L432)
#### Inherited from
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`id`](/docs/sdk/common/interfaces/IExperience#id)
***
### name
> **name**: `string`
Defined in: [common/index.ts:433](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L433)
#### Inherited from
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`name`](/docs/sdk/common/interfaces/IExperience#name)
***
### percentage
> **percentage**: `number`
Defined in: [common/index.ts:451](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L451)
***
### type
> **type**: `"AB"`
Defined in: [common/index.ts:448](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L448)
#### Overrides
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`type`](/docs/sdk/common/interfaces/IExperience#type)
---
# Interface: IBindMessagePropConfig
Source: /docs/sdk/common/interfaces/IBindMessagePropConfig
Defined in: [common/index.ts:124](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L124)
## Extends
- [`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)
## Properties
### behavior
> **behavior**: [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)
Defined in: [common/index.ts:165](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L165)
#### Inherited from
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`behavior`](/docs/sdk/common/interfaces/IPropConfig#behavior)
***
### description
> **description**: `string`
Defined in: [common/index.ts:163](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L163)
#### Inherited from
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`description`](/docs/sdk/common/interfaces/IPropConfig#description)
***
### id
> **id**: `string`
Defined in: [common/index.ts:161](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L161)
#### Inherited from
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`id`](/docs/sdk/common/interfaces/IPropConfig#id)
***
### messageType
> **messageType**: `MyopMessageKey`
Defined in: [common/index.ts:126](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L126)
***
### name
> **name**: `string`
Defined in: [common/index.ts:162](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L162)
#### Inherited from
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`name`](/docs/sdk/common/interfaces/IPropConfig#name)
***
### type
> **type**: `string`
Defined in: [common/index.ts:125](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L125)
#### Overrides
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`type`](/docs/sdk/common/interfaces/IPropConfig#type)
---
# Interface: ICodeRefBehavior
Source: /docs/sdk/common/interfaces/ICodeRefBehavior
Defined in: [common/index.ts:191](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L191)
## Extends
- [`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior)
## Properties
### type
> **type**: `"code"`
Defined in: [common/index.ts:192](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L192)
#### Overrides
[`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior).[`type`](/docs/sdk/common/interfaces/IRefBehavior#type)
---
# Interface: IComponentConfig
Source: /docs/sdk/common/interfaces/IComponentConfig
Defined in: [common/index.ts:477](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L477)
## Properties
### instance
> **instance**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)
Defined in: [common/index.ts:478](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L478)
***
### name
> **name**: `string`
Defined in: [common/index.ts:482](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L482)
***
### type
> **type**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
Defined in: [common/index.ts:479](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L479)
---
# Interface: IComponentDefinitionConfig
Source: /docs/sdk/common/interfaces/IComponentDefinitionConfig
Defined in: [common/index.ts:256](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L256)
## Properties
### createdBy?
> `optional` **createdBy**: `string`
Defined in: [common/index.ts:273](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L273)
***
### createdOn?
> `optional` **createdOn**: `string`
Defined in: [common/index.ts:272](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L272)
***
### defaultSkin
> **defaultSkin**: `number`
Defined in: [common/index.ts:266](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L266)
***
### description
> **description**: `string`
Defined in: [common/index.ts:259](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L259)
***
### id
> **id**: `string`
Defined in: [common/index.ts:257](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L257)
***
### name
> **name**: `string`
Defined in: [common/index.ts:258](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L258)
***
### props
> **props**: [`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)[]
Defined in: [common/index.ts:263](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L263)
***
### refs
> **refs**: [`IRefConfig`](/docs/sdk/common/interfaces/IRefConfig)[]
Defined in: [common/index.ts:264](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L264)
***
### skins
> **skins**: [`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)[]
Defined in: [common/index.ts:265](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L265)
***
### updatedBy?
> `optional` **updatedBy**: `string`
Defined in: [common/index.ts:274](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L274)
---
# Interface: IComponentInstanceConfig
Source: /docs/sdk/common/interfaces/IComponentInstanceConfig
Defined in: [common/index.ts:403](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L403)
## Properties
### componentId
> **componentId**: `string`
Defined in: [common/index.ts:405](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L405)
***
### componentName
> **componentName**: `string`
Defined in: [common/index.ts:411](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L411)
***
### id
> **id**: `string`
Defined in: [common/index.ts:404](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L404)
***
### nestedComponents?
> `optional` **nestedComponents**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)[]
Defined in: [common/index.ts:416](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L416)
***
### resolvedExperiences?
> `optional` **resolvedExperiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]
Defined in: [common/index.ts:420](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L420)
***
### resolvedNestedComponents?
> `optional` **resolvedNestedComponents**: [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)[]
Defined in: [common/index.ts:422](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L422)
***
### skinSelector
> **skinSelector**: [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)
Defined in: [common/index.ts:413](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L413)
---
# Interface: IComponentRefBehavior
Source: /docs/sdk/common/interfaces/IComponentRefBehavior
Defined in: [common/index.ts:180](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L180)
## Extends
- [`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior)
## Properties
### componentId
> **componentId**: `string`
Defined in: [common/index.ts:182](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L182)
***
### ~~instance~~
> **instance**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)
Defined in: [common/index.ts:188](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L188)
#### Deprecated
Property instance is deprecated and will be removed in future versions.
***
### type
> **type**: `"component"`
Defined in: [common/index.ts:181](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L181)
#### Overrides
[`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior).[`type`](/docs/sdk/common/interfaces/IRefBehavior#type)
---
# Interface: IDateRange
Source: /docs/sdk/common/interfaces/IDateRange
Defined in: [common/index.ts:454](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L454)
## Properties
### end
> **end**: `Date`
Defined in: [common/index.ts:457](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L457)
***
### id
> **id**: `string`
Defined in: [common/index.ts:455](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L455)
***
### start
> **start**: `Date`
Defined in: [common/index.ts:456](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L456)
***
### timezone
> **timezone**: `string`
Defined in: [common/index.ts:458](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L458)
---
# Interface: IDedicatedSkinConfig
Source: /docs/sdk/common/interfaces/IDedicatedSkinConfig
Defined in: [common/index.ts:389](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L389)
## Extends
- [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)
## Properties
### skin
> **skin**: [`ISkinInstanceConfig`](/docs/sdk/common/interfaces/ISkinInstanceConfig)
Defined in: [common/index.ts:400](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L400)
***
### ~~skins?~~
> `optional` **skins**: [`ISkinInstanceConfig`](/docs/sdk/common/interfaces/ISkinInstanceConfig)[]
Defined in: [common/index.ts:399](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L399)
#### Deprecated
Use [skin](/docs/sdk/common/interfaces/IDedicatedSkinConfig#skin) instead.
Property skins is deprecated and will be removed in future versions.
Please update your code to use [skin](/docs/sdk/common/interfaces/IDedicatedSkinConfig#skin) for better compatibility.
***
### type
> **type**: `"Dedicated"`
Defined in: [common/index.ts:390](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L390)
#### Overrides
[`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig).[`type`](/docs/sdk/common/interfaces/ISkinSelectorConfig#type)
---
# Interface: IDefaultSkinConfig
Source: /docs/sdk/common/interfaces/IDefaultSkinConfig
Defined in: [common/index.ts:380](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L380)
This Skin Config Type is not yet supported but will be added in a future release.
Please check the documentation for updates.
## Extends
- [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)
## Properties
### type
> **type**: `"Default"`
Defined in: [common/index.ts:381](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L381)
#### Overrides
[`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig).[`type`](/docs/sdk/common/interfaces/ISkinSelectorConfig#type)
---
# Interface: IElementRef
Source: /docs/sdk/common/interfaces/IElementRef
Defined in: [common/MyopElementRef.ts:1](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L1)
## Properties
### BoundingRect?
> `optional` **BoundingRect**: `DOMRect`
Defined in: [common/MyopElementRef.ts:4](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L4)
***
### htmlTagName
> **htmlTagName**: `string`
Defined in: [common/MyopElementRef.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L3)
***
### myopId?
> `optional` **myopId**: `string`
Defined in: [common/MyopElementRef.ts:2](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L2)
***
### offsetLeft?
> `optional` **offsetLeft**: `number`
Defined in: [common/MyopElementRef.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L6)
***
### offsetTop?
> `optional` **offsetTop**: `number`
Defined in: [common/MyopElementRef.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L5)
***
### type
> **type**: `string`
Defined in: [common/MyopElementRef.ts:8](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/MyopElementRef.ts#L8)
---
# Interface: IExperience
Source: /docs/sdk/common/interfaces/IExperience
Defined in: [common/index.ts:431](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L431)
## Extended by
- [`IABExperience`](/docs/sdk/common/interfaces/IABExperience)
- [`ISegmentExperience`](/docs/sdk/common/interfaces/ISegmentExperience)
## Properties
### description
> **description**: `string`
Defined in: [common/index.ts:434](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L434)
***
### experiences
> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]
Defined in: [common/index.ts:436](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L436)
***
### id
> **id**: `string`
Defined in: [common/index.ts:432](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L432)
***
### name
> **name**: `string`
Defined in: [common/index.ts:433](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L433)
***
### type
> **type**: `"Segment"` \| `"Promo"` \| `"AB"`
Defined in: [common/index.ts:435](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L435)
---
# Interface: IExperienceABSplit
Source: /docs/sdk/common/interfaces/IExperienceABSplit
Defined in: [common/index.ts:224](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L224)
Experience A/B split configuration
## Properties
### versions
> **versions**: [`IExperienceABSplitVersion`](/docs/sdk/common/interfaces/IExperienceABSplitVersion)[]
Defined in: [common/index.ts:225](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L225)
---
# Interface: IExperienceABSplitVersion
Source: /docs/sdk/common/interfaces/IExperienceABSplitVersion
Defined in: [common/index.ts:216](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L216)
Experience A/B split version
## Properties
### id
> **id**: `string`
Defined in: [common/index.ts:217](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L217)
***
### percentage
> **percentage**: `number`
Defined in: [common/index.ts:218](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L218)
---
# Interface: IExperienceDefinitionConfig
Source: /docs/sdk/common/interfaces/IExperienceDefinitionConfig
Defined in: [common/index.ts:245](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L245)
Experience definition config (v2)
## Extends
- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)
## Properties
### components
> **components**: `string`[]
Defined in: [common/index.ts:247](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L247)
Selected component IDs
***
### description
> **description**: `string`
Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`description`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#description)
***
### fallback
> **fallback**: `Record`\<`string`, `string`\>
Defined in: [common/index.ts:251](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L251)
Fallback variant per component
***
### id
> **id**: `string`
Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`id`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#id)
***
### name
> **name**: `string`
Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`name`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#name)
***
### segments
> **segments**: [`IExperienceSegment`](/docs/sdk/common/interfaces/IExperienceSegment)[]
Defined in: [common/index.ts:249](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L249)
Segment configurations
***
### tags
> **tags**: `string`[]
Defined in: [common/index.ts:253](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L253)
Tags
***
### updatedBy?
> `optional` **updatedBy**: `string`
Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedBy`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedby)
***
### updatedOn?
> `optional` **updatedOn**: `string`
Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedOn`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedon)
---
# Interface: IExperienceSegment
Source: /docs/sdk/common/interfaces/IExperienceSegment
Defined in: [common/index.ts:231](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L231)
Experience segment configuration
## Properties
### abSplit?
> `optional` **abSplit**: [`IExperienceABSplit`](/docs/sdk/common/interfaces/IExperienceABSplit)
Defined in: [common/index.ts:238](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L238)
***
### componentVariants
> **componentVariants**: `Record`\<`string`, `string` \| `Record`\<`string`, `string`\>\>
Defined in: [common/index.ts:237](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L237)
***
### description
> **description**: `string`
Defined in: [common/index.ts:234](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L234)
***
### id
> **id**: `string`
Defined in: [common/index.ts:232](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L232)
***
### name
> **name**: `string`
Defined in: [common/index.ts:233](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L233)
***
### rules
> **rules**: [`IExperienceSegmentRule`](/docs/sdk/common/interfaces/IExperienceSegmentRule)[]
Defined in: [common/index.ts:235](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L235)
***
### stickyProperties?
> `optional` **stickyProperties**: `string`[]
Defined in: [common/index.ts:239](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L239)
***
### useAb
> **useAb**: `boolean`
Defined in: [common/index.ts:236](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L236)
---
# Interface: IExperienceSegmentRule
Source: /docs/sdk/common/interfaces/IExperienceSegmentRule
Defined in: [common/index.ts:207](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L207)
Experience segment rule
## Properties
### operator
> **operator**: `string`
Defined in: [common/index.ts:209](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L209)
***
### property
> **property**: `string`
Defined in: [common/index.ts:208](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L208)
***
### value
> **value**: `string`
Defined in: [common/index.ts:210](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L210)
---
# Interface: IFunctionResultsSegment
Source: /docs/sdk/common/interfaces/IFunctionResultsSegment
Defined in: [common/index.ts:352](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L352)
## Extends
- [`ISegmentDefinition`](/docs/sdk/common/interfaces/ISegmentDefinition)
## Properties
### description
> **description**: `string`
Defined in: [common/index.ts:356](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L356)
***
### function
> **function**: `string`
Defined in: [common/index.ts:357](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L357)
***
### id
> **id**: `string`
Defined in: [common/index.ts:353](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L353)
#### Overrides
[`ISegmentDefinition`](/docs/sdk/common/interfaces/ISegmentDefinition).[`id`](/docs/sdk/common/interfaces/ISegmentDefinition#id)
***
### name
> **name**: `string`
Defined in: [common/index.ts:355](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L355)
***
### type
> **type**: `"FunctionResult"`
Defined in: [common/index.ts:354](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L354)
#### Overrides
[`ISegmentDefinition`](/docs/sdk/common/interfaces/ISegmentDefinition).[`type`](/docs/sdk/common/interfaces/ISegmentDefinition#type)
---
# Interface: IHTMLLoaderConfig
Source: /docs/sdk/common/interfaces/IHTMLLoaderConfig
Defined in: [common/index.ts:54](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L54)
## Extends
- [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)
## Indexable
\[`key`: `string`\]: `any`
## Properties
### autoHeight?
> `optional` **autoHeight**: `boolean`
Defined in: [common/index.ts:59](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L59)
***
### height?
> `optional` **height**: `string`
Defined in: [common/index.ts:60](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L60)
***
### HTML
> **HTML**: `string`
Defined in: [common/index.ts:56](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L56)
***
### shadowRootMode?
> `optional` **shadowRootMode**: `"open"` \| `"closed"` \| `"none"` \| `"localFrame"`
Defined in: [common/index.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L58)
***
### type
> **type**: `"HTMLLoader"`
Defined in: [common/index.ts:55](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L55)
#### Overrides
[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig).[`type`](/docs/sdk/common/interfaces/ISkinLoaderConfig#type)
***
### width?
> `optional` **width**: `string`
Defined in: [common/index.ts:61](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L61)
---
# Interface: IIframeLoaderConfig
Source: /docs/sdk/common/interfaces/IIframeLoaderConfig
Defined in: [common/index.ts:38](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L38)
## Extends
- [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)
## Indexable
\[`key`: `string`\]: `any`
## Properties
### autoHeight
> **autoHeight**: `boolean`
Defined in: [common/index.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L41)
***
### height?
> `optional` **height**: `string`
Defined in: [common/index.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L42)
***
### type
> **type**: `"IframeLoader"`
Defined in: [common/index.ts:39](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L39)
#### Overrides
[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig).[`type`](/docs/sdk/common/interfaces/ISkinLoaderConfig#type)
***
### url
> **url**: `string`
Defined in: [common/index.ts:40](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L40)
***
### width?
> `optional` **width**: `string`
Defined in: [common/index.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L43)
---
# Interface: IMessagePropConfig
Source: /docs/sdk/common/interfaces/IMessagePropConfig
Defined in: [common/index.ts:119](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L119)
## Extends
- [`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)
## Properties
### behavior
> **behavior**: [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)
Defined in: [common/index.ts:165](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L165)
#### Inherited from
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`behavior`](/docs/sdk/common/interfaces/IPropConfig#behavior)
***
### description
> **description**: `string`
Defined in: [common/index.ts:163](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L163)
#### Inherited from
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`description`](/docs/sdk/common/interfaces/IPropConfig#description)
***
### id
> **id**: `string`
Defined in: [common/index.ts:161](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L161)
#### Inherited from
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`id`](/docs/sdk/common/interfaces/IPropConfig#id)
***
### messageType
> **messageType**: `MyopMessageKey`
Defined in: [common/index.ts:121](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L121)
***
### name
> **name**: `string`
Defined in: [common/index.ts:162](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L162)
#### Inherited from
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`name`](/docs/sdk/common/interfaces/IPropConfig#name)
***
### type
> **type**: `string`
Defined in: [common/index.ts:120](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L120)
#### Overrides
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig).[`type`](/docs/sdk/common/interfaces/IPropConfig#type)
---
# Interface: IMinimizedLoaderConfig
Source: /docs/sdk/common/interfaces/IMinimizedLoaderConfig
Defined in: [common/index.ts:65](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L65)
## Extends
- [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)
## Indexable
\[`key`: `string`\]: `any`
## Properties
### type
> **type**: `"MinimizedLoader"`
Defined in: [common/index.ts:66](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L66)
#### Overrides
[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig).[`type`](/docs/sdk/common/interfaces/ISkinLoaderConfig#type)
---
# Interface: IMyopSDK
Source: /docs/sdk/common/interfaces/IMyopSDK
Defined in: [common/BaseMyopSDK.ts:25](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L25)
## Properties
### components
> **components**: `Record`\<`string`, [`HostedComponent`](/docs/sdk/common/classes/HostedComponent)\>
Defined in: [common/BaseMyopSDK.ts:34](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L34)
***
### handleIncomeMessages()
> **handleIncomeMessages**: (`message`) => `void`
Defined in: [common/BaseMyopSDK.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L32)
#### Parameters
##### message
[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Returns
`void`
***
### init()
> **init**: () => `void`
Defined in: [common/BaseMyopSDK.ts:26](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L26)
#### Returns
`void`
***
### messageToHost()
> **messageToHost**: (`message`, `replayTo`?) => `void`
Defined in: [common/BaseMyopSDK.ts:28](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L28)
#### Parameters
##### message
[`MyopBindReplayMessage`](/docs/sdk/messages/classes/MyopBindReplayMessage)
##### replayTo?
[`MyopBindMessage`](/docs/sdk/messages/classes/MyopBindMessage)
#### Returns
`void`
***
### supportedHandlers
> **supportedHandlers**: [`BaseMessageHandler`](/docs/sdk/common/classes/BaseMessageHandler)[]
Defined in: [common/BaseMyopSDK.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/BaseMyopSDK.ts#L30)
---
# Interface: IPropBehavior
Source: /docs/sdk/common/interfaces/IPropBehavior
Defined in: [common/index.ts:143](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L143)
## Extended by
- [`IPropCodeBehavior`](/docs/sdk/common/interfaces/IPropCodeBehavior)
- [`IPropMessageBehavior`](/docs/sdk/common/interfaces/IPropMessageBehavior)
## Properties
### type
> **type**: `"message"` \| `"code"`
Defined in: [common/index.ts:144](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L144)
---
# Interface: IPropCodeBehavior
Source: /docs/sdk/common/interfaces/IPropCodeBehavior
Defined in: [common/index.ts:147](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L147)
## Extends
- [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)
## Properties
### remap?
> `optional` **remap**: `string`
Defined in: [common/index.ts:149](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L149)
***
### type
> **type**: `"code"`
Defined in: [common/index.ts:148](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L148)
#### Overrides
[`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior).[`type`](/docs/sdk/common/interfaces/IPropBehavior#type)
---
# Interface: IPropConfig
Source: /docs/sdk/common/interfaces/IPropConfig
Defined in: [common/index.ts:160](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L160)
## Extended by
- [`IMessagePropConfig`](/docs/sdk/common/interfaces/IMessagePropConfig)
- [`IBindMessagePropConfig`](/docs/sdk/common/interfaces/IBindMessagePropConfig)
## Properties
### behavior
> **behavior**: [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)
Defined in: [common/index.ts:165](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L165)
***
### description
> **description**: `string`
Defined in: [common/index.ts:163](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L163)
***
### id
> **id**: `string`
Defined in: [common/index.ts:161](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L161)
***
### name
> **name**: `string`
Defined in: [common/index.ts:162](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L162)
***
### type
> **type**: `string`
Defined in: [common/index.ts:164](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L164)
---
# Interface: IPropMessageBehavior
Source: /docs/sdk/common/interfaces/IPropMessageBehavior
Defined in: [common/index.ts:152](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L152)
## Extends
- [`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior)
## Properties
### message
> **message**: `MyopMessageKey`
Defined in: [common/index.ts:154](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L154)
***
### mode
> **mode**: `"input"` \| `"output"`
Defined in: [common/index.ts:157](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L157)
***
### params
> **params**: [`IPropMessageBehaviorParam`](/docs/sdk/common/interfaces/IPropMessageBehaviorParam)[]
Defined in: [common/index.ts:156](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L156)
***
### ref
> **ref**: `string`
Defined in: [common/index.ts:155](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L155)
***
### type
> **type**: `"message"`
Defined in: [common/index.ts:153](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L153)
#### Overrides
[`IPropBehavior`](/docs/sdk/common/interfaces/IPropBehavior).[`type`](/docs/sdk/common/interfaces/IPropBehavior#type)
---
# Interface: IPropMessageBehaviorParam
Source: /docs/sdk/common/interfaces/IPropMessageBehaviorParam
Defined in: [common/index.ts:139](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L139)
## Properties
### value
> **value**: `string`
Defined in: [common/index.ts:140](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L140)
---
# Interface: IRefBehavior
Source: /docs/sdk/common/interfaces/IRefBehavior
Defined in: [common/index.ts:176](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L176)
## Extended by
- [`IComponentRefBehavior`](/docs/sdk/common/interfaces/IComponentRefBehavior)
- [`ICodeRefBehavior`](/docs/sdk/common/interfaces/ICodeRefBehavior)
## Properties
### type
> **type**: [`IRefBehaviorType`](/docs/sdk/common/type-aliases/IRefBehaviorType)
Defined in: [common/index.ts:177](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L177)
---
# Interface: IRefConfig
Source: /docs/sdk/common/interfaces/IRefConfig
Defined in: [common/index.ts:195](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L195)
## Properties
### behavior
> **behavior**: [`IRefBehavior`](/docs/sdk/common/interfaces/IRefBehavior)
Defined in: [common/index.ts:201](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L201)
***
### description
> **description**: `string`
Defined in: [common/index.ts:198](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L198)
***
### id
> **id**: `string`
Defined in: [common/index.ts:196](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L196)
***
### name
> **name**: `string`
Defined in: [common/index.ts:197](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L197)
***
### selector
> **selector**: `string`
Defined in: [common/index.ts:200](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L200)
***
### selectorType
> **selectorType**: `string`
Defined in: [common/index.ts:199](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L199)
---
# Interface: ISegmentDefinition
Source: /docs/sdk/common/interfaces/ISegmentDefinition
Defined in: [common/index.ts:347](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L347)
## Extended by
- [`IFunctionResultsSegment`](/docs/sdk/common/interfaces/IFunctionResultsSegment)
## Properties
### id
> **id**: `string`
Defined in: [common/index.ts:348](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L348)
***
### type
> **type**: `"FunctionResult"`
Defined in: [common/index.ts:349](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L349)
---
# Interface: ISegmentExperience
Source: /docs/sdk/common/interfaces/ISegmentExperience
Defined in: [common/index.ts:461](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L461)
## Extends
- [`IExperience`](/docs/sdk/common/interfaces/IExperience)
## Properties
### dateRange?
> `optional` **dateRange**: [`IDateRange`](/docs/sdk/common/interfaces/IDateRange)
Defined in: [common/index.ts:464](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L464)
***
### description
> **description**: `string`
Defined in: [common/index.ts:434](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L434)
#### Inherited from
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`description`](/docs/sdk/common/interfaces/IExperience#description)
***
### experiences
> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]
Defined in: [common/index.ts:436](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L436)
#### Inherited from
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`experiences`](/docs/sdk/common/interfaces/IExperience#experiences)
***
### id
> **id**: `string`
Defined in: [common/index.ts:432](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L432)
#### Inherited from
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`id`](/docs/sdk/common/interfaces/IExperience#id)
***
### name
> **name**: `string`
Defined in: [common/index.ts:433](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L433)
#### Inherited from
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`name`](/docs/sdk/common/interfaces/IExperience#name)
***
### segment
> **segment**: [`ISegmentDefinition`](/docs/sdk/common/interfaces/ISegmentDefinition)
Defined in: [common/index.ts:463](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L463)
***
### type
> **type**: `"Segment"` \| `"Promo"` \| `"AB"`
Defined in: [common/index.ts:462](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L462)
#### Overrides
[`IExperience`](/docs/sdk/common/interfaces/IExperience).[`type`](/docs/sdk/common/interfaces/IExperience#type)
---
# Interface: ISegmentInstance
Source: /docs/sdk/common/interfaces/ISegmentInstance
Defined in: [common/index.ts:342](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L342)
## Properties
### segmentId
> **segmentId**: `string`
Defined in: [common/index.ts:343](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L343)
***
### skinSelector
> **skinSelector**: [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)
Defined in: [common/index.ts:344](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L344)
---
# Interface: ISegmentedSkinConfig
Source: /docs/sdk/common/interfaces/ISegmentedSkinConfig
Defined in: [common/index.ts:384](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L384)
## Extends
- [`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig)
## Properties
### segments
> **segments**: [`ISegmentInstance`](/docs/sdk/common/interfaces/ISegmentInstance)[]
Defined in: [common/index.ts:386](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L386)
***
### type
> **type**: `"Segmented"`
Defined in: [common/index.ts:385](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L385)
#### Overrides
[`ISkinSelectorConfig`](/docs/sdk/common/interfaces/ISkinSelectorConfig).[`type`](/docs/sdk/common/interfaces/ISkinSelectorConfig#type)
---
# Interface: ISkinConfig
Source: /docs/sdk/common/interfaces/ISkinConfig
Defined in: [common/index.ts:106](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L106)
## Extended by
- [`v2_ISkinConfig`](/docs/sdk/common/interfaces/v2_ISkinConfig)
## Properties
### createdBy?
> `optional` **createdBy**: `string`
Defined in: [common/index.ts:111](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L111)
***
### createdOn?
> `optional` **createdOn**: `string`
Defined in: [common/index.ts:112](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L112)
***
### description
> **description**: `string`
Defined in: [common/index.ts:109](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L109)
***
### id
> **id**: `string`
Defined in: [common/index.ts:107](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L107)
***
### loader
> **loader**: [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)
Defined in: [common/index.ts:110](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L110)
***
### name
> **name**: `string`
Defined in: [common/index.ts:108](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L108)
---
# Interface: ISkinInstanceConfig
Source: /docs/sdk/common/interfaces/ISkinInstanceConfig
Defined in: [common/index.ts:329](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L329)
## Properties
### id
> **id**: `string`
Defined in: [common/index.ts:330](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L330)
---
# Interface: ISkinLoaderConfig
Source: /docs/sdk/common/interfaces/ISkinLoaderConfig
Defined in: [common/index.ts:85](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L85)
## Extended by
- [`IWebComponentLoaderConfig`](/docs/sdk/common/interfaces/IWebComponentLoaderConfig)
- [`IIframeLoaderConfig`](/docs/sdk/common/interfaces/IIframeLoaderConfig)
- [`IHTMLLoaderConfig`](/docs/sdk/common/interfaces/IHTMLLoaderConfig)
- [`IMinimizedLoaderConfig`](/docs/sdk/common/interfaces/IMinimizedLoaderConfig)
## Indexable
\[`key`: `string`\]: `any`
## Properties
### type
> **type**: `"IframeLoader"` \| `"WebComponentLoader"` \| `"HTMLLoader"` \| `"MinimizedLoader"`
Defined in: [common/index.ts:86](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L86)
---
# Interface: ISkinSelectorConfig
Source: /docs/sdk/common/interfaces/ISkinSelectorConfig
Defined in: [common/index.ts:333](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L333)
## Extended by
- [`IDefaultSkinConfig`](/docs/sdk/common/interfaces/IDefaultSkinConfig)
- [`ISegmentedSkinConfig`](/docs/sdk/common/interfaces/ISegmentedSkinConfig)
- [`IDedicatedSkinConfig`](/docs/sdk/common/interfaces/IDedicatedSkinConfig)
## Properties
### type
> **type**: `"Segmented"` \| `"Dedicated"` \| `"Default"`
Defined in: [common/index.ts:334](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L334)
---
# Interface: IUserFlow
Source: /docs/sdk/common/interfaces/IUserFlow
Defined in: [common/index.ts:489](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L489)
## Extends
- `Omit`\<[`IUserFlowDefinition`](/docs/sdk/common/interfaces/IUserFlowDefinition), `"components"`\>.`IBranchable`
## Properties
### branch?
> `optional` **branch**: `string`
Defined in: [common/index.ts:474](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L474)
#### Inherited from
`Omit.branch`
***
### components
> **components**: [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)[]
Defined in: [common/index.ts:490](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L490)
***
### description
> **description**: `string`
Defined in: [common/index.ts:470](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L470)
#### Inherited from
`Omit.description`
***
### experiences
> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]
Defined in: [common/index.ts:473](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L473)
#### Inherited from
`Omit.experiences`
***
### id
> **id**: `string`
Defined in: [common/index.ts:468](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L468)
#### Inherited from
`Omit.id`
***
### name
> **name**: `string`
Defined in: [common/index.ts:469](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L469)
#### Inherited from
`Omit.name`
***
### origins
> **origins**: `string`[]
Defined in: [common/index.ts:472](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L472)
#### Inherited from
`Omit.origins`
---
# Interface: IUserFlowDefinition
Source: /docs/sdk/common/interfaces/IUserFlowDefinition
Defined in: [common/index.ts:467](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L467)
## Properties
### branch?
> `optional` **branch**: `string`
Defined in: [common/index.ts:474](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L474)
***
### components
> **components**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)[]
Defined in: [common/index.ts:471](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L471)
***
### description
> **description**: `string`
Defined in: [common/index.ts:470](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L470)
***
### experiences
> **experiences**: [`IExperience`](/docs/sdk/common/interfaces/IExperience)[]
Defined in: [common/index.ts:473](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L473)
***
### id
> **id**: `string`
Defined in: [common/index.ts:468](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L468)
***
### name
> **name**: `string`
Defined in: [common/index.ts:469](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L469)
***
### origins
> **origins**: `string`[]
Defined in: [common/index.ts:472](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L472)
---
# Interface: IWebComponentLoaderConfig
Source: /docs/sdk/common/interfaces/IWebComponentLoaderConfig
Defined in: [common/index.ts:31](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L31)
## Extends
- [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)
## Indexable
\[`key`: `string`\]: `any`
## Properties
### framework?
> `optional` **framework**: `"react"` \| `"vue"` \| `"angular"`
Defined in: [common/index.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L35)
***
### tag
> **tag**: `string`
Defined in: [common/index.ts:34](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L34)
***
### type
> **type**: `"WebComponentLoader"`
Defined in: [common/index.ts:32](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L32)
#### Overrides
[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig).[`type`](/docs/sdk/common/interfaces/ISkinLoaderConfig#type)
***
### url
> **url**: `string`
Defined in: [common/index.ts:33](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L33)
---
# Interface: v2\_IBaseMyopObject
Source: /docs/sdk/common/interfaces/v2_IBaseMyopObject
Defined in: [common/index.ts:278](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L278)
## Extended by
- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)
## Properties
### description
> **description**: `string`
Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)
***
### id
> **id**: `string`
Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)
***
### name
> **name**: `string`
Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)
---
# Interface: v2\_IComponentDefinitionConfig
Source: /docs/sdk/common/interfaces/v2_IComponentDefinitionConfig
Defined in: [common/index.ts:302](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L302)
## Extends
- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)
## Properties
### access?
> `optional` **access**: [`ComponentAccess`](/docs/sdk/common/interfaces/ComponentAccess)
Defined in: [common/index.ts:306](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L306)
***
### description
> **description**: `string`
Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`description`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#description)
***
### DTOs
> **DTOs**: [`v2_IDTO`](/docs/sdk/common/interfaces/v2_IDTO)[]
Defined in: [common/index.ts:304](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L304)
***
### extra?
> `optional` **extra**: `object`
Defined in: [common/index.ts:319](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L319)
#### firstVariant
> **firstVariant**: [`v2_IVariantConfig`](/docs/sdk/common/interfaces/v2_IVariantConfig)
***
### id
> **id**: `string`
Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`id`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#id)
***
### name
> **name**: `string`
Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`name`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#name)
***
### preview\_variant
> **preview\_variant**: [`v2_IVariantConfig`](/docs/sdk/common/interfaces/v2_IVariantConfig)
Defined in: [common/index.ts:318](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L318)
***
### tags
> **tags**: `string`[]
Defined in: [common/index.ts:305](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L305)
***
### updatedBy?
> `optional` **updatedBy**: `string`
Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedBy`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedby)
***
### updatedOn?
> `optional` **updatedOn**: `string`
Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedOn`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedon)
***
### variants\_data
> **variants\_data**: `object`[]
Defined in: [common/index.ts:310](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L310)
#### has\_releases?
> `optional` **has\_releases**: `boolean`
#### id
> **id**: `string`
#### name
> **name**: `string`
#### updatedBy?
> `optional` **updatedBy**: `string`
#### updatedOn?
> `optional` **updatedOn**: `string`
***
### variants\_ids
> **variants\_ids**: `string`[]
Defined in: [common/index.ts:303](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L303)
***
### variants\_names
> **variants\_names**: `string`[]
Defined in: [common/index.ts:309](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L309)
---
# Interface: v2\_IDTO
Source: /docs/sdk/common/interfaces/v2_IDTO
Defined in: [common/index.ts:324](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L324)
## Extends
- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)
## Properties
### data
> **data**: `object`
Defined in: [common/index.ts:325](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L325)
***
### description
> **description**: `string`
Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`description`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#description)
***
### id
> **id**: `string`
Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`id`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#id)
***
### methodName
> **methodName**: `string`
Defined in: [common/index.ts:326](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L326)
***
### name
> **name**: `string`
Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`name`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#name)
***
### updatedBy?
> `optional` **updatedBy**: `string`
Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedBy`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedby)
***
### updatedOn?
> `optional` **updatedOn**: `string`
Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedOn`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedon)
---
# Interface: v2\_IMyopStoredObject
Source: /docs/sdk/common/interfaces/v2_IMyopStoredObject
Defined in: [common/index.ts:284](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L284)
## Extends
- [`v2_IBaseMyopObject`](/docs/sdk/common/interfaces/v2_IBaseMyopObject)
## Extended by
- [`v2_IVariantConfig`](/docs/sdk/common/interfaces/v2_IVariantConfig)
- [`IExperienceDefinitionConfig`](/docs/sdk/common/interfaces/IExperienceDefinitionConfig)
- [`v2_IComponentDefinitionConfig`](/docs/sdk/common/interfaces/v2_IComponentDefinitionConfig)
- [`v2_IDTO`](/docs/sdk/common/interfaces/v2_IDTO)
## Properties
### description
> **description**: `string`
Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)
#### Inherited from
[`v2_IBaseMyopObject`](/docs/sdk/common/interfaces/v2_IBaseMyopObject).[`description`](/docs/sdk/common/interfaces/v2_IBaseMyopObject#description)
***
### id
> **id**: `string`
Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)
#### Inherited from
[`v2_IBaseMyopObject`](/docs/sdk/common/interfaces/v2_IBaseMyopObject).[`id`](/docs/sdk/common/interfaces/v2_IBaseMyopObject#id)
***
### name
> **name**: `string`
Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)
#### Inherited from
[`v2_IBaseMyopObject`](/docs/sdk/common/interfaces/v2_IBaseMyopObject).[`name`](/docs/sdk/common/interfaces/v2_IBaseMyopObject#name)
***
### updatedBy?
> `optional` **updatedBy**: `string`
Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)
***
### updatedOn?
> `optional` **updatedOn**: `string`
Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)
---
# Interface: v2\_IReleaseMetadata
Source: /docs/sdk/common/interfaces/v2_IReleaseMetadata
Defined in: [common/index.ts:91](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L91)
## Properties
### environmentId
> **environmentId**: `string`
Defined in: [common/index.ts:92](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L92)
***
### environmentIdentifier
> **environmentIdentifier**: `string`
Defined in: [common/index.ts:93](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L93)
---
# Interface: v2\_ISkinConfig
Source: /docs/sdk/common/interfaces/v2_ISkinConfig
Defined in: [common/index.ts:115](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L115)
## Extends
- [`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
## Properties
### componentId
> **componentId**: `string`
Defined in: [common/index.ts:116](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L116)
***
### createdBy?
> `optional` **createdBy**: `string`
Defined in: [common/index.ts:111](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L111)
#### Inherited from
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`createdBy`](/docs/sdk/common/interfaces/ISkinConfig#createdby)
***
### createdOn?
> `optional` **createdOn**: `string`
Defined in: [common/index.ts:112](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L112)
#### Inherited from
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`createdOn`](/docs/sdk/common/interfaces/ISkinConfig#createdon)
***
### description
> **description**: `string`
Defined in: [common/index.ts:109](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L109)
#### Inherited from
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`description`](/docs/sdk/common/interfaces/ISkinConfig#description)
***
### id
> **id**: `string`
Defined in: [common/index.ts:107](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L107)
#### Inherited from
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`id`](/docs/sdk/common/interfaces/ISkinConfig#id)
***
### loader
> **loader**: [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)
Defined in: [common/index.ts:110](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L110)
#### Inherited from
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`loader`](/docs/sdk/common/interfaces/ISkinConfig#loader)
***
### name
> **name**: `string`
Defined in: [common/index.ts:108](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L108)
#### Inherited from
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`name`](/docs/sdk/common/interfaces/ISkinConfig#name)
---
# Interface: v2\_IVariantConfig
Source: /docs/sdk/common/interfaces/v2_IVariantConfig
Defined in: [common/index.ts:99](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L99)
## Extends
- [`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject)
## Properties
### componentId
> **componentId**: `string`
Defined in: [common/index.ts:101](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L101)
***
### description
> **description**: `string`
Defined in: [common/index.ts:281](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L281)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`description`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#description)
***
### id
> **id**: `string`
Defined in: [common/index.ts:279](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L279)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`id`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#id)
***
### loader
> **loader**: [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)
Defined in: [common/index.ts:100](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L100)
***
### name
> **name**: `string`
Defined in: [common/index.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L280)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`name`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#name)
***
### releases?
> `optional` **releases**: [`v2_IReleaseMetadata`](/docs/sdk/common/interfaces/v2_IReleaseMetadata)[]
Defined in: [common/index.ts:103](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L103)
***
### updatedBy?
> `optional` **updatedBy**: `string`
Defined in: [common/index.ts:286](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L286)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedBy`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedby)
***
### updatedOn?
> `optional` **updatedOn**: `string`
Defined in: [common/index.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L285)
#### Inherited from
[`v2_IMyopStoredObject`](/docs/sdk/common/interfaces/v2_IMyopStoredObject).[`updatedOn`](/docs/sdk/common/interfaces/v2_IMyopStoredObject#updatedon)
---
# Type Alias: CleanupHandler()
Source: /docs/sdk/common/type-aliases/CleanupHandler
> **CleanupHandler**: () => `void`
Defined in: [common/index.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L7)
## Returns
`void`
---
# Type Alias: Dictionary\
Source: /docs/sdk/common/type-aliases/Dictionary
> **Dictionary**\<`T`\>: `object`
Defined in: [common/index.ts:9](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L9)
## Type Parameters
• **T**
## Index Signature
\[`key`: `string`\]: `T`
---
# Type Alias: IDashboard\
Source: /docs/sdk/common/type-aliases/IDashboard
> **IDashboard**\<`T`\>: `ExtendRecursively`\<`T`, `DashboardObject`\>
Defined in: [common/index.ts:83](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L83)
## Type Parameters
• **T**
---
# Type Alias: IMessageExecutorCleanup
Source: /docs/sdk/common/type-aliases/IMessageExecutorCleanup
> **IMessageExecutorCleanup**: [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler) \| `Promise`\<[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)\> \| `Promise`\<`void`\> \| `void`
Defined in: [common/baseMessageHandler.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/baseMessageHandler.ts#L5)
---
# Type Alias: IRefBehaviorType
Source: /docs/sdk/common/type-aliases/IRefBehaviorType
> **IRefBehaviorType**: `"code"` \| `"component"`
Defined in: [common/index.ts:174](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L174)
---
# Type Alias: LoaderFrameworkType
Source: /docs/sdk/common/type-aliases/LoaderFrameworkType
> **LoaderFrameworkType**: keyof *typeof* [`LoaderFrameworks`](/docs/sdk/common/variables/LoaderFrameworks)
Defined in: [common/index.ts:29](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L29)
---
# Type Alias: PropType
Source: /docs/sdk/common/type-aliases/PropType
> **PropType**: `"any"` \| `"string"` \| `"number"` \| `string`
Defined in: [common/index.ts:21](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L21)
---
# Type Alias: RefSelectorType
Source: /docs/sdk/common/type-aliases/RefSelectorType
> **RefSelectorType**: `"id-attribute"` \| `"css-selector"` \| `"xpath"` \| `string`
Defined in: [common/index.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L22)
---
# Type Alias: SkinLoaderType
Source: /docs/sdk/common/type-aliases/SkinLoaderType
> **SkinLoaderType**: keyof *typeof* [`SkinLoaders`](/docs/sdk/common/variables/SkinLoaders)
Defined in: [common/index.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L19)
---
# Variable: ExperienceTypes
Source: /docs/sdk/common/variables/ExperienceTypes
> `const` **ExperienceTypes**: `object`
Defined in: [common/index.ts:425](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L425)
## Type declaration
### AB
> `readonly` **AB**: `"AB"` = `"AB"`
### Promo
> `readonly` **Promo**: `"Promo"` = `"Promo"`
### Segment
> `readonly` **Segment**: `"Segment"` = `"Segment"`
---
# Variable: LoaderFrameworks
Source: /docs/sdk/common/variables/LoaderFrameworks
> `const` **LoaderFrameworks**: `object`
Defined in: [common/index.ts:24](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L24)
## Type declaration
### angular
> `readonly` **angular**: `"angular"` = `"angular"`
### react
> `readonly` **react**: `"react"` = `"react"`
### vue
> `readonly` **vue**: `"vue"` = `"vue"`
---
# Variable: PropConfigBehaviorTypes
Source: /docs/sdk/common/variables/PropConfigBehaviorTypes
> `const` **PropConfigBehaviorTypes**: `object`
Defined in: [common/index.ts:134](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L134)
## Type declaration
### code
> `readonly` **code**: `"code"` = `"code"`
### message
> `readonly` **message**: `"message"` = `"message"`
---
# Variable: PropMessageModes
Source: /docs/sdk/common/variables/PropMessageModes
> `const` **PropMessageModes**: `object`
Defined in: [common/index.ts:129](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L129)
## Type declaration
### input
> `readonly` **input**: `"input"` = `"input"`
### output
> `readonly` **output**: `"output"` = `"output"`
---
# Variable: SegmentType
Source: /docs/sdk/common/variables/SegmentType
> `const` **SegmentType**: `object`
Defined in: [common/index.ts:338](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L338)
## Type declaration
### FunctionResult
> `readonly` **FunctionResult**: `"FunctionResult"` = `"FunctionResult"`
---
# Variable: ShadowRootModeType
Source: /docs/sdk/common/variables/ShadowRootModeType
> `const` **ShadowRootModeType**: `object`
Defined in: [common/index.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L46)
## Type declaration
### closed
> `readonly` **closed**: `"closed"` = `"closed"`
### localFrame
> `readonly` **localFrame**: `"localFrame"` = `"localFrame"`
### none
> `readonly` **none**: `"none"` = `"none"`
### open
> `readonly` **open**: `"open"` = `"open"`
---
# Variable: SkinLoaders
Source: /docs/sdk/common/variables/SkinLoaders
> `const` **SkinLoaders**: `object`
Defined in: [common/index.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L13)
## Type declaration
### HTMLLoader
> `readonly` **HTMLLoader**: `"HTMLLoader"` = `"HTMLLoader"`
### IframeLoader
> `readonly` **IframeLoader**: `"IframeLoader"` = `"IframeLoader"`
### MinimizedLoader
> `readonly` **MinimizedLoader**: `"MinimizedLoader"` = `"MinimizedLoader"`
### WebComponentLoader
> `readonly` **WebComponentLoader**: `"WebComponentLoader"` = `"WebComponentLoader"`
---
# Variable: SkinSelectorTypes
Source: /docs/sdk/common/variables/SkinSelectorTypes
> `const` **SkinSelectorTypes**: `object`
Defined in: [common/index.ts:360](https://github.com/hadarge/myop/blob/main/myop-sdk/src/common/index.ts#L360)
## Type declaration
### Dedicated
> `readonly` **Dedicated**: `"Dedicated"` = `"Dedicated"`
### Default
> `readonly` **Default**: `"Default"` = `"Default"`
This Selector Type is not yet supported but will be added in a future release.
Please check the documentation for updates.
### Segmented
> `readonly` **Segmented**: `"Segmented"` = `"Segmented"`
---
# Class: CloudRepository
Source: /docs/sdk/helpers/classes/CloudRepository
Defined in: [helpers/CloudRepository.ts:98](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L98)
## Constructors
### new CloudRepository()
> **new CloudRepository**(`_baseUrl`): [`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository)
Defined in: [helpers/CloudRepository.ts:128](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L128)
#### Parameters
##### \_baseUrl
`string` = `'https://cloud.myop.dev'`
#### Returns
[`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository)
## Accessors
### Main
#### Get Signature
> **get** `static` **Main**(): [`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository)
Defined in: [helpers/CloudRepository.ts:101](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L101)
##### Returns
[`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository)
## Methods
### fetchAutoFlow()
> **fetchAutoFlow**(`componentId`): `Promise`\<[`IUserFlow`](/docs/sdk/common/interfaces/IUserFlow)\>
Defined in: [helpers/CloudRepository.ts:259](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L259)
#### Parameters
##### componentId
`string`
#### Returns
`Promise`\<[`IUserFlow`](/docs/sdk/common/interfaces/IUserFlow)\>
***
### ~~fetchComponent()~~
> **fetchComponent**(`componentId`, `flowId`?): `Promise`\<`undefined` \| [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>
Defined in: [helpers/CloudRepository.ts:307](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L307)
#### Parameters
##### componentId
`string`
##### flowId?
`string`
#### Returns
`Promise`\<`undefined` \| [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>
#### Deprecated
Use fetchComponentV2 or fetchComponentV1 explicitly
Defaults to v1 behavior for backward compatibility with existing code
***
### fetchComponentV1()
> **fetchComponentV1**(`componentId`, `flowId`?): `Promise`\<`undefined` \| [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>
Defined in: [helpers/CloudRepository.ts:249](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L249)
Fetch a v1 component from a flow
#### Parameters
##### componentId
`string`
##### flowId?
`string`
#### Returns
`Promise`\<`undefined` \| [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>
***
### fetchComponentV2()
> **fetchComponentV2**(`componentId`, `environmentIdentifier`?, `preview`?): `Promise`\<[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>
Defined in: [helpers/CloudRepository.ts:173](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L173)
Fetch a v2 component config
If env/preview not specified and component was preloaded, uses preloaded params
#### Parameters
##### componentId
`string`
##### environmentIdentifier?
`string`
##### preview?
`boolean`
#### Returns
`Promise`\<[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)\>
***
### fetchFlow()
> **fetchFlow**(`flowId`): `Promise`\<[`IUserFlow`](/docs/sdk/common/interfaces/IUserFlow)\>
Defined in: [helpers/CloudRepository.ts:280](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L280)
#### Parameters
##### flowId
`string`
#### Returns
`Promise`\<[`IUserFlow`](/docs/sdk/common/interfaces/IUserFlow)\>
***
### getDefaultEnvironment()
> **getDefaultEnvironment**(): `string`
Defined in: [helpers/CloudRepository.ts:141](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L141)
Get the current default environment
#### Returns
`string`
***
### getPreloadedParams()
> **getPreloadedParams**(`componentId`): `undefined` \| \{ `env`: `string`; `preview`: `boolean`; \}
Defined in: [helpers/CloudRepository.ts:165](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L165)
Get the preloaded params for a component (if preloaded)
Returns undefined if not preloaded
#### Parameters
##### componentId
`string`
#### Returns
`undefined` \| \{ `env`: `string`; `preview`: `boolean`; \}
***
### isPreloaded()
> **isPreloaded**(`componentId`, `env`?, `preview`?): `boolean`
Defined in: [helpers/CloudRepository.ts:151](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L151)
Check if a component is already cached/preloaded (v2)
If env and preview are not provided, checks if ANY version is preloaded
#### Parameters
##### componentId
`string`
##### env?
`string`
##### preview?
`boolean`
#### Returns
`boolean`
***
### setEnvironment()
> **setEnvironment**(`env`): `void`
Defined in: [helpers/CloudRepository.ts:134](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L134)
Set the default environment for this CloudRepository instance
#### Parameters
##### env
`string`
#### Returns
`void`
---
# Class: ComponentConfig
Source: /docs/sdk/helpers/classes/ComponentConfig
Defined in: [helpers/configBuilder.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L41)
## Implements
- [`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)
## Constructors
### new ComponentConfig()
> **new ComponentConfig**(): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
#### Returns
[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
## Properties
### \_runTimeId
> **\_runTimeId**: `string`
Defined in: [helpers/configBuilder.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L43)
***
### \_runTimeInstanceId
> **\_runTimeInstanceId**: `string`
Defined in: [helpers/configBuilder.ts:42](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L42)
***
### \_runTimeName
> **\_runTimeName**: `string`
Defined in: [helpers/configBuilder.ts:44](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L44)
***
### instance
> **instance**: [`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)
Defined in: [helpers/configBuilder.ts:50](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L50)
#### Implementation of
[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig).[`instance`](/docs/sdk/common/interfaces/IComponentConfig#instance)
***
### name
> **name**: `string`
Defined in: [helpers/configBuilder.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L57)
#### Implementation of
[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig).[`name`](/docs/sdk/common/interfaces/IComponentConfig#name)
***
### type
> **type**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
Defined in: [helpers/configBuilder.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L58)
#### Implementation of
[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig).[`type`](/docs/sdk/common/interfaces/IComponentConfig#type)
## Methods
### build()
> **build**(): `any`
Defined in: [helpers/configBuilder.ts:117](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L117)
#### Returns
`any`
***
### withBasicRef()
> **withBasicRef**(`refSelector`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
Defined in: [helpers/configBuilder.ts:101](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L101)
#### Parameters
##### refSelector
`string`
#### Returns
[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
***
### withDefaultSkin()
> **withDefaultSkin**(`defaultSkin`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
Defined in: [helpers/configBuilder.ts:83](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L83)
#### Parameters
##### defaultSkin
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
#### Returns
[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
***
### withInstance()
> **withInstance**(`instance`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
Defined in: [helpers/configBuilder.ts:68](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L68)
#### Parameters
##### instance
[`IComponentInstanceConfig`](/docs/sdk/common/interfaces/IComponentInstanceConfig)
#### Returns
[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
***
### withName()
> **withName**(`name`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
Defined in: [helpers/configBuilder.ts:78](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L78)
#### Parameters
##### name
`string`
#### Returns
[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
***
### withRef()
> **withRef**(`ref`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
Defined in: [helpers/configBuilder.ts:96](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L96)
#### Parameters
##### ref
[`IRefConfig`](/docs/sdk/common/interfaces/IRefConfig)
#### Returns
[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
***
### withType()
> **withType**(`type`): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
Defined in: [helpers/configBuilder.ts:73](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L73)
#### Parameters
##### type
[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
#### Returns
[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
***
### create()
> `static` **create**(): [`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
Defined in: [helpers/configBuilder.ts:46](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L46)
#### Returns
[`ComponentConfig`](/docs/sdk/helpers/classes/ComponentConfig)
---
# Class: SkinConfig
Source: /docs/sdk/helpers/classes/SkinConfig
Defined in: [helpers/configBuilder.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L11)
## Implements
- [`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
## Constructors
### new SkinConfig()
> **new SkinConfig**(): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
#### Returns
[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
## Properties
### \_runTimeId
> **\_runTimeId**: `string`
Defined in: [helpers/configBuilder.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L13)
***
### \_runTimeInstanceId
> **\_runTimeInstanceId**: `string`
Defined in: [helpers/configBuilder.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L12)
***
### \_runTimeName
> **\_runTimeName**: `string`
Defined in: [helpers/configBuilder.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L14)
***
### description
> **description**: `string` = `''`
Defined in: [helpers/configBuilder.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L22)
#### Implementation of
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`description`](/docs/sdk/common/interfaces/ISkinConfig#description)
***
### id
> **id**: `string`
Defined in: [helpers/configBuilder.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L20)
#### Implementation of
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`id`](/docs/sdk/common/interfaces/ISkinConfig#id)
***
### loader
> **loader**: [`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)
Defined in: [helpers/configBuilder.ts:23](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L23)
#### Implementation of
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`loader`](/docs/sdk/common/interfaces/ISkinConfig#loader)
***
### name
> **name**: `string`
Defined in: [helpers/configBuilder.ts:21](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L21)
#### Implementation of
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig).[`name`](/docs/sdk/common/interfaces/ISkinConfig#name)
## Methods
### build()
> **build**(): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
Defined in: [helpers/configBuilder.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L36)
#### Returns
[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
***
### withHTMLLoader()
> **withHTMLLoader**(`loader`): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
Defined in: [helpers/configBuilder.ts:30](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L30)
#### Parameters
##### loader
`Omit`\<[`IHTMLLoaderConfig`](/docs/sdk/common/interfaces/IHTMLLoaderConfig), `"type"`\>
#### Returns
[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
***
### withLoader()
> **withLoader**(`loader`): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
Defined in: [helpers/configBuilder.ts:25](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L25)
#### Parameters
##### loader
[`ISkinLoaderConfig`](/docs/sdk/common/interfaces/ISkinLoaderConfig)
#### Returns
[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
***
### create()
> `static` **create**(): [`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
Defined in: [helpers/configBuilder.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/configBuilder.ts#L16)
#### Returns
[`SkinConfig`](/docs/sdk/helpers/classes/SkinConfig)
---
# Function: addClass()
Source: /docs/sdk/helpers/functions/addClass
> **addClass**(`component`, `className`, `myopId`): `void`
Defined in: [helpers/classList.ts:20](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/classList.ts#L20)
## Parameters
### component
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
### className
`string`
### myopId
`string`
## Returns
`void`
---
# Function: applyStylesheet()
Source: /docs/sdk/helpers/functions/applyStylesheet
> **applyStylesheet**(`component`, `stylesheet`, `css`?): () => `void`
Defined in: [helpers/applyStylesheet.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/applyStylesheet.ts#L13)
## Parameters
### component
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
### stylesheet
[`StylesheetDefinition`](/docs/sdk/helpers/type-aliases/StylesheetDefinition)
### css?
`string`
## Returns
`Function`
### Returns
`void`
---
# Function: applyStylesheetLink()
Source: /docs/sdk/helpers/functions/applyStylesheetLink
> **applyStylesheetLink**(`component`, `link`): () => `void`
Defined in: [helpers/applyStylesheet.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/applyStylesheet.ts#L57)
## Parameters
### component
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
### link
`string`
## Returns
`Function`
### Returns
`void`
---
# Function: changeSkinUrlByTokenizer()
Source: /docs/sdk/helpers/functions/changeSkinUrlByTokenizer
> **changeSkinUrlByTokenizer**(`tokenMap`): (`selectedSkin`) => `Promise`\<[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)\>
Defined in: [helpers/iframeSkinUrlTokenizer.ts:31](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/iframeSkinUrlTokenizer.ts#L31)
## Parameters
### tokenMap
[`TokenMap`](/docs/sdk/helpers/type-aliases/TokenMap)
## Returns
`Function`
### Parameters
#### selectedSkin
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
### Returns
`Promise`\<[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)\>
---
# Function: createIframeSkinByTokenizer()
Source: /docs/sdk/helpers/functions/createIframeSkinByTokenizer
> **createIframeSkinByTokenizer**(`selectedSkin`, `tokenMap`): [`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
Defined in: [helpers/iframeSkinUrlTokenizer.ts:16](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/iframeSkinUrlTokenizer.ts#L16)
## Parameters
### selectedSkin
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
### tokenMap
[`TokenMap`](/docs/sdk/helpers/type-aliases/TokenMap)
## Returns
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
---
# Function: exec()
Source: /docs/sdk/helpers/functions/exec
> **exec**(`getter`): `Promise`\<`any`\>
Defined in: [helpers/exec.ts:1](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/exec.ts#L1)
## Parameters
### getter
`any`
## Returns
`Promise`\<`any`\>
---
# Function: removeClass()
Source: /docs/sdk/helpers/functions/removeClass
> **removeClass**(`component`, `className`, `myopId`): `void`
Defined in: [helpers/classList.ts:29](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/classList.ts#L29)
## Parameters
### component
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
### className
`string`
### myopId
`string`
## Returns
`void`
---
# helpers
Source: /docs/sdk/helpers
## Classes
- [CloudRepository](/docs/sdk/helpers/classes/CloudRepository)
- [ComponentConfig](/docs/sdk/helpers/classes/ComponentConfig)
- [SkinConfig](/docs/sdk/helpers/classes/SkinConfig)
## Type Aliases
- [StylesheetDefinition](/docs/sdk/helpers/type-aliases/StylesheetDefinition)
- [TokenMap](/docs/sdk/helpers/type-aliases/TokenMap)
## Variables
- [~~v2\_CloudRepository~~](/docs/sdk/helpers/variables/v2_CloudRepository)
## Functions
- [addClass](/docs/sdk/helpers/functions/addClass)
- [applyStylesheet](/docs/sdk/helpers/functions/applyStylesheet)
- [applyStylesheetLink](/docs/sdk/helpers/functions/applyStylesheetLink)
- [changeSkinUrlByTokenizer](/docs/sdk/helpers/functions/changeSkinUrlByTokenizer)
- [createIframeSkinByTokenizer](/docs/sdk/helpers/functions/createIframeSkinByTokenizer)
- [exec](/docs/sdk/helpers/functions/exec)
- [removeClass](/docs/sdk/helpers/functions/removeClass)
---
# Type Alias: StylesheetDefinition
Source: /docs/sdk/helpers/type-aliases/StylesheetDefinition
> **StylesheetDefinition**: `object`
Defined in: [helpers/applyStylesheet.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/applyStylesheet.ts#L11)
## Index Signature
\[`key`: `string`\]: `CSSProperties`
---
# Type Alias: TokenMap
Source: /docs/sdk/helpers/type-aliases/TokenMap
> **TokenMap**: `Record`\<`string`, `string` \| `number`\>
Defined in: [helpers/iframeSkinUrlTokenizer.ts:3](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/iframeSkinUrlTokenizer.ts#L3)
---
# Variable: ~~v2\_CloudRepository~~
Source: /docs/sdk/helpers/variables/v2_CloudRepository
> `const` **v2\_CloudRepository**: *typeof* [`CloudRepository`](/docs/sdk/helpers/classes/CloudRepository) = `CloudRepository`
Defined in: [helpers/CloudRepository.ts:315](https://github.com/hadarge/myop/blob/main/myop-sdk/src/helpers/CloudRepository.ts#L315)
## Deprecated
Use CloudRepository instead
---
# Class: `abstract` BaseMyopComponent\
Source: /docs/sdk/host/classes/BaseMyopComponent
Defined in: [host/components/IMyopComponent.ts:126](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L126)
## Extended by
- [`MyopExtractedWebComponent`](/docs/sdk/host/classes/MyopExtractedWebComponent)
## Type Parameters
• **P** = `any`
• **R** *extends* `RefTypes` = `RefTypes`
## Implements
- [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\<`P`\>
## Constructors
### new BaseMyopComponent()
> `protected` **new BaseMyopComponent**\<`P`, `R`\>(`componentDefinition`, `container`, `options`?): [`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent)\<`P`, `R`\>
Defined in: [host/components/IMyopComponent.ts:133](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L133)
#### Parameters
##### componentDefinition
[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
##### container
`HTMLElement`
##### options?
[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
#### Returns
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent)\<`P`, `R`\>
## Properties
### \_markedForDisposed
> **\_markedForDisposed**: `boolean` = `false`
Defined in: [host/components/IMyopComponent.ts:151](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L151)
***
### \_whenInitiated
> **\_whenInitiated**: `Promise`\<`any`\>
Defined in: [host/components/IMyopComponent.ts:255](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L255)
***
### \_whenInitiatedReject()?
> `optional` **\_whenInitiatedReject**: (`value`?) => `any`
Defined in: [host/components/IMyopComponent.ts:253](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L253)
#### Parameters
##### value?
`any`
#### Returns
`any`
***
### \_whenInitiatedResolve()?
> `optional` **\_whenInitiatedResolve**: (`value`?) => `any`
Defined in: [host/components/IMyopComponent.ts:252](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L252)
#### Parameters
##### value?
`any`
#### Returns
`any`
***
### componentDefinition
> **componentDefinition**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
Defined in: [host/components/IMyopComponent.ts:133](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L133)
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`componentDefinition`](/docs/sdk/host/interfaces/IMyopComponent#componentdefinition)
***
### container
> **container**: `HTMLElement`
Defined in: [host/components/IMyopComponent.ts:133](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L133)
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`container`](/docs/sdk/host/interfaces/IMyopComponent#container)
***
### element?
> `optional` **element**: `HTMLElement`
Defined in: [host/components/IMyopComponent.ts:131](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L131)
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`element`](/docs/sdk/host/interfaces/IMyopComponent#element)
***
### id
> **id**: `string` = `''`
Defined in: [host/components/IMyopComponent.ts:127](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L127)
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`id`](/docs/sdk/host/interfaces/IMyopComponent#id)
***
### isInitiated
> **isInitiated**: `boolean` = `false`
Defined in: [host/components/IMyopComponent.ts:250](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L250)
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`isInitiated`](/docs/sdk/host/interfaces/IMyopComponent#isinitiated)
***
### messageHandlers
> **messageHandlers**: `Record`\<`string`, `messageHandler`\<`any`\>[]\> = `{}`
Defined in: [host/components/IMyopComponent.ts:129](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L129)
***
### props
> **props**: `P`
Defined in: [host/components/IMyopComponent.ts:366](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L366)
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`props`](/docs/sdk/host/interfaces/IMyopComponent#props)
***
### refs
> **refs**: `R`
Defined in: [host/components/IMyopComponent.ts:367](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L367)
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`refs`](/docs/sdk/host/interfaces/IMyopComponent#refs)
## Accessors
### markedForDisposed
#### Get Signature
> **get** **markedForDisposed**(): `boolean`
Defined in: [host/components/IMyopComponent.ts:153](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L153)
##### Returns
`boolean`
#### Set Signature
> **set** **markedForDisposed**(`value`): `void`
Defined in: [host/components/IMyopComponent.ts:157](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L157)
##### Parameters
###### value
`boolean`
##### Returns
`void`
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`markedForDisposed`](/docs/sdk/host/interfaces/IMyopComponent#markedfordisposed)
## Methods
### bind()
> **bind**\<`T`\>(`messageType`, `handler`): `void`
Defined in: [host/components/IMyopComponent.ts:171](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L171)
#### Type Parameters
• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Parameters
##### messageType
`string`
##### handler
(`message`) => `boolean`
#### Returns
`void`
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`bind`](/docs/sdk/host/interfaces/IMyopComponent#bind)
***
### bindWhen()
> **bindWhen**\<`T`\>(`messageType`, `predicate`, `handler`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/components/IMyopComponent.ts:182](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L182)
#### Type Parameters
• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Parameters
##### messageType
`string`
##### predicate
(`message`) => `boolean`
##### handler
(`message`) => `void`
#### Returns
[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
***
### dispose()
> **dispose**(): `void`
Defined in: [host/components/IMyopComponent.ts:331](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L331)
#### Returns
`void`
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`dispose`](/docs/sdk/host/interfaces/IMyopComponent#dispose)
***
### hide()
> `abstract` **hide**(): `void`
Defined in: [host/components/IMyopComponent.ts:164](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L164)
#### Returns
`void`
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`hide`](/docs/sdk/host/interfaces/IMyopComponent#hide)
***
### initiated()
> **initiated**(): `Promise`\<`any`\>
Defined in: [host/components/IMyopComponent.ts:260](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L260)
#### Returns
`Promise`\<`any`\>
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`initiated`](/docs/sdk/host/interfaces/IMyopComponent#initiated)
***
### inspect()
> `abstract` **inspect**(): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/components/IMyopComponent.ts:168](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L168)
#### Returns
[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`inspect`](/docs/sdk/host/interfaces/IMyopComponent#inspect)
***
### onMessageReceived()
> **onMessageReceived**(`incomeMessage`): `boolean`
Defined in: [host/components/IMyopComponent.ts:212](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L212)
#### Parameters
##### incomeMessage
[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Returns
`boolean`
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`onMessageReceived`](/docs/sdk/host/interfaces/IMyopComponent#onmessagereceived)
***
### send()
> **send**(`message`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/components/IMyopComponent.ts:285](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L285)
#### Parameters
##### message
[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Returns
[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`send`](/docs/sdk/host/interfaces/IMyopComponent#send)
***
### setInitiated()
> **setInitiated**(): `void`
Defined in: [host/components/IMyopComponent.ts:243](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L243)
#### Returns
`void`
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`setInitiated`](/docs/sdk/host/interfaces/IMyopComponent#setinitiated)
***
### show()
> `abstract` **show**(): `void`
Defined in: [host/components/IMyopComponent.ts:166](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L166)
#### Returns
`void`
#### Implementation of
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent).[`show`](/docs/sdk/host/interfaces/IMyopComponent#show)
---
# Class: `abstract` BaseMyopLoader
Source: /docs/sdk/host/classes/BaseMyopLoader
Defined in: [host/loaders/IMyopLoader.ts:10](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L10)
## Implements
- [`IMyopLoader`](/docs/sdk/host/interfaces/IMyopLoader)
## Constructors
### new BaseMyopLoader()
> **new BaseMyopLoader**(): [`BaseMyopLoader`](/docs/sdk/host/classes/BaseMyopLoader)
#### Returns
[`BaseMyopLoader`](/docs/sdk/host/classes/BaseMyopLoader)
## Properties
### load()
> `abstract` **load**: (`componentDefinition`, `skin`, `container`, `options`?) => `Promise`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\>
Defined in: [host/loaders/IMyopLoader.ts:12](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L12)
#### Parameters
##### componentDefinition
[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
##### skin
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
##### container
`HTMLElement`
##### options?
[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
#### Returns
`Promise`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\>
#### Implementation of
[`IMyopLoader`](/docs/sdk/host/interfaces/IMyopLoader).[`load`](/docs/sdk/host/interfaces/IMyopLoader#load)
***
### type
> `abstract` **type**: `"IframeLoader"` \| `"WebComponentLoader"` \| `"HTMLLoader"` \| `"MinimizedLoader"`
Defined in: [host/loaders/IMyopLoader.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L11)
#### Implementation of
[`IMyopLoader`](/docs/sdk/host/interfaces/IMyopLoader).[`type`](/docs/sdk/host/interfaces/IMyopLoader#type)
## Methods
### appendChild()
> **appendChild**(`container`, `element`, `options`?): `undefined` \| `HTMLElement`
Defined in: [host/loaders/IMyopLoader.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L14)
#### Parameters
##### container
`HTMLElement`
##### element
`HTMLElement`
##### options?
[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
#### Returns
`undefined` \| `HTMLElement`
---
# Class: MyopExtractedWebComponent
Source: /docs/sdk/host/classes/MyopExtractedWebComponent
Defined in: [host/components/myopExtractedWebComponent.ts:14](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L14)
Component wrapper for Myop Web Components that are extracted from HTML
and run directly on the host document (not in an iframe).
These components use the native Web Components API (Custom Elements + Shadow DOM)
and communicate via direct method calls and CustomEvents instead of postMessage.
## Extends
- [`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent)
## Constructors
### new MyopExtractedWebComponent()
> **new MyopExtractedWebComponent**(`componentDefinition`, `skin`, `container`, `customElement`, `tagName`, `options`?): [`MyopExtractedWebComponent`](/docs/sdk/host/classes/MyopExtractedWebComponent)
Defined in: [host/components/myopExtractedWebComponent.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L19)
#### Parameters
##### componentDefinition
[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
##### skin
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
##### container
`HTMLElement`
##### customElement
`HTMLElement`
##### tagName
`string`
##### options?
[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
#### Returns
[`MyopExtractedWebComponent`](/docs/sdk/host/classes/MyopExtractedWebComponent)
#### Overrides
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`constructor`](/docs/sdk/host/classes/BaseMyopComponent#constructors)
## Properties
### \_markedForDisposed
> **\_markedForDisposed**: `boolean` = `false`
Defined in: [host/components/IMyopComponent.ts:151](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L151)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`_markedForDisposed`](/docs/sdk/host/classes/BaseMyopComponent#_markedfordisposed)
***
### \_whenInitiated
> **\_whenInitiated**: `Promise`\<`any`\>
Defined in: [host/components/IMyopComponent.ts:255](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L255)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`_whenInitiated`](/docs/sdk/host/classes/BaseMyopComponent#_wheninitiated)
***
### \_whenInitiatedReject()?
> `optional` **\_whenInitiatedReject**: (`value`?) => `any`
Defined in: [host/components/IMyopComponent.ts:253](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L253)
#### Parameters
##### value?
`any`
#### Returns
`any`
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`_whenInitiatedReject`](/docs/sdk/host/classes/BaseMyopComponent#_wheninitiatedreject)
***
### \_whenInitiatedResolve()?
> `optional` **\_whenInitiatedResolve**: (`value`?) => `any`
Defined in: [host/components/IMyopComponent.ts:252](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L252)
#### Parameters
##### value?
`any`
#### Returns
`any`
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`_whenInitiatedResolve`](/docs/sdk/host/classes/BaseMyopComponent#_wheninitiatedresolve)
***
### cleanupInspect
> **cleanupInspect**: [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/components/myopExtractedWebComponent.ts:34](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L34)
***
### componentDefinition
> **componentDefinition**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
Defined in: [host/components/IMyopComponent.ts:133](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L133)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`componentDefinition`](/docs/sdk/host/classes/BaseMyopComponent#componentdefinition-1)
***
### container
> **container**: `HTMLElement`
Defined in: [host/components/myopExtractedWebComponent.ts:22](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L22)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`container`](/docs/sdk/host/classes/BaseMyopComponent#container-1)
***
### element?
> `optional` **element**: `HTMLElement`
Defined in: [host/components/IMyopComponent.ts:131](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L131)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`element`](/docs/sdk/host/classes/BaseMyopComponent#element)
***
### id
> **id**: `string` = `''`
Defined in: [host/components/IMyopComponent.ts:127](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L127)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`id`](/docs/sdk/host/classes/BaseMyopComponent#id)
***
### isInitiated
> **isInitiated**: `boolean` = `false`
Defined in: [host/components/IMyopComponent.ts:250](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L250)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`isInitiated`](/docs/sdk/host/classes/BaseMyopComponent#isinitiated)
***
### messageHandlers
> **messageHandlers**: `Record`\<`string`, `messageHandler`\<`any`\>[]\> = `{}`
Defined in: [host/components/IMyopComponent.ts:129](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L129)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`messageHandlers`](/docs/sdk/host/classes/BaseMyopComponent#messagehandlers)
***
### props
> **props**: `any`
Defined in: [host/components/IMyopComponent.ts:366](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L366)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`props`](/docs/sdk/host/classes/BaseMyopComponent#props)
***
### refs
> **refs**: `RefTypes`
Defined in: [host/components/IMyopComponent.ts:367](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L367)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`refs`](/docs/sdk/host/classes/BaseMyopComponent#refs)
## Accessors
### markedForDisposed
#### Get Signature
> **get** **markedForDisposed**(): `boolean`
Defined in: [host/components/IMyopComponent.ts:153](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L153)
##### Returns
`boolean`
#### Set Signature
> **set** **markedForDisposed**(`value`): `void`
Defined in: [host/components/IMyopComponent.ts:157](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L157)
##### Parameters
###### value
`boolean`
##### Returns
`void`
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`markedForDisposed`](/docs/sdk/host/classes/BaseMyopComponent#markedfordisposed)
## Methods
### bind()
> **bind**\<`T`\>(`messageType`, `handler`): `void`
Defined in: [host/components/IMyopComponent.ts:171](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L171)
#### Type Parameters
• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Parameters
##### messageType
`string`
##### handler
(`message`) => `boolean`
#### Returns
`void`
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`bind`](/docs/sdk/host/classes/BaseMyopComponent#bind)
***
### bindWhen()
> **bindWhen**\<`T`\>(`messageType`, `predicate`, `handler`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/components/IMyopComponent.ts:182](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L182)
#### Type Parameters
• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Parameters
##### messageType
`string`
##### predicate
(`message`) => `boolean`
##### handler
(`message`) => `void`
#### Returns
[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`bindWhen`](/docs/sdk/host/classes/BaseMyopComponent#bindwhen)
***
### dispose()
> **dispose**(): `void`
Defined in: [host/components/myopExtractedWebComponent.ts:138](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L138)
#### Returns
`void`
#### Overrides
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`dispose`](/docs/sdk/host/classes/BaseMyopComponent#dispose)
***
### getData()
> **getData**(): `unknown`
Defined in: [host/components/myopExtractedWebComponent.ts:71](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L71)
Get current data from the component
#### Returns
`unknown`
***
### hide()
> **hide**(): `void`
Defined in: [host/components/myopExtractedWebComponent.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L41)
#### Returns
`void`
#### Overrides
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`hide`](/docs/sdk/host/classes/BaseMyopComponent#hide)
***
### initiated()
> **initiated**(): `Promise`\<`any`\>
Defined in: [host/components/IMyopComponent.ts:260](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L260)
#### Returns
`Promise`\<`any`\>
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`initiated`](/docs/sdk/host/classes/BaseMyopComponent#initiated)
***
### initWithData()
> **initWithData**(`data`): `void`
Defined in: [host/components/myopExtractedWebComponent.ts:62](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L62)
Initialize the component with data by calling myop_init_interface directly
#### Parameters
##### data
`unknown`
#### Returns
`void`
***
### inspect()
> **inspect**(): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/components/myopExtractedWebComponent.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L36)
#### Returns
[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
#### Overrides
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`inspect`](/docs/sdk/host/classes/BaseMyopComponent#inspect)
***
### onMessageReceived()
> **onMessageReceived**(`incomeMessage`): `boolean`
Defined in: [host/components/IMyopComponent.ts:212](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L212)
#### Parameters
##### incomeMessage
[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Returns
`boolean`
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`onMessageReceived`](/docs/sdk/host/classes/BaseMyopComponent#onmessagereceived)
***
### send()
> **send**(`message`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/components/myopExtractedWebComponent.ts:127](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L127)
For compatibility with message-based components.
Web components don't use postMessage, so this is a no-op for most messages.
#### Parameters
##### message
[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Returns
[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
#### Overrides
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`send`](/docs/sdk/host/classes/BaseMyopComponent#send)
***
### setCtaHandler()
> **setCtaHandler**(`handler`): `void`
Defined in: [host/components/myopExtractedWebComponent.ts:82](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L82)
Set CTA handler - unified API with iframe components.
Called via props.myop_cta_handler = handler
#### Parameters
##### handler
(`action`, `payload`) => `void`
#### Returns
`void`
***
### setInitiated()
> **setInitiated**(): `void`
Defined in: [host/components/IMyopComponent.ts:243](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L243)
#### Returns
`void`
#### Inherited from
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`setInitiated`](/docs/sdk/host/classes/BaseMyopComponent#setinitiated)
***
### show()
> **show**(): `void`
Defined in: [host/components/myopExtractedWebComponent.ts:50](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/myopExtractedWebComponent.ts#L50)
#### Returns
`void`
#### Overrides
[`BaseMyopComponent`](/docs/sdk/host/classes/BaseMyopComponent).[`show`](/docs/sdk/host/classes/BaseMyopComponent#show)
---
# Function: actAs()
Source: /docs/sdk/host/functions/actAs
> **actAs**\<`T`\>(`ref`): [`FunctionifyRef`](/docs/sdk/host/type-aliases/FunctionifyRef)\<`T`\>
Defined in: [host/componentCore.ts:545](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L545)
## Type Parameters
• **T**
## Parameters
### ref
[`Ref`](/docs/sdk/messages/classes/Ref)
## Returns
[`FunctionifyRef`](/docs/sdk/host/type-aliases/FunctionifyRef)\<`T`\>
---
# Function: connectProps()
Source: /docs/sdk/host/functions/connectProps
> **connectProps**\<`T`\>(`component`, `propsConfig`, `selectedSkin`): `Omit`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent), `"props"`\> & `object`
Defined in: [host/componentCore.ts:86](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L86)
## Type Parameters
• **T** *extends* [`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)[]
## Parameters
### component
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
### propsConfig
[`IPropConfig`](/docs/sdk/common/interfaces/IPropConfig)[]
### selectedSkin
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
## Returns
`Omit`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent), `"props"`\> & `object`
---
# Function: connectRefs()
Source: /docs/sdk/host/functions/connectRefs
> **connectRefs**(`component`, `componentConfig`, `components`, `withoutRefComponents`): `Promise`\<`void`\>
Defined in: [host/componentCore.ts:445](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L445)
## Parameters
### component
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
### componentConfig
[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)
### components
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)[]
### withoutRefComponents
`boolean` = `false`
## Returns
`Promise`\<`void`\>
---
# Function: createFallbackElement()
Source: /docs/sdk/host/functions/createFallbackElement
> **createFallbackElement**(): `HTMLDivElement`
Defined in: [host/myopLoader.ts:92](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L92)
Creates a fallback DOM element with the Myop branding
## Returns
`HTMLDivElement`
---
# Function: createLoaderElement()
Source: /docs/sdk/host/functions/createLoaderElement
> **createLoaderElement**(`fadeDuration`): `HTMLDivElement`
Defined in: [host/myopLoader.ts:81](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L81)
Creates a loader DOM element with the Myop branding
## Parameters
### fadeDuration
`number` = `200`
## Returns
`HTMLDivElement`
---
# Function: createMyopLogoSvg()
Source: /docs/sdk/host/functions/createMyopLogoSvg
> **createMyopLogoSvg**(): `SVGSVGElement`
Defined in: [host/myopLoader.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L19)
Creates the Myop logo SVG element
## Returns
`SVGSVGElement`
---
# Function: createRefComponent()
Source: /docs/sdk/host/functions/createRefComponent
> **createRefComponent**\<`T`\>(`ref`, `componentConfig`, `components`, `options`?): `Promise`\<`T`\>
Defined in: [host/componentCore.ts:338](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L338)
## Type Parameters
• **T** *extends* [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent) = [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
## Parameters
### ref
[`Ref`](/docs/sdk/messages/classes/Ref)
### componentConfig
[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)
### components
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)[]
### options?
[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
## Returns
`Promise`\<`T`\>
---
# Function: createRefProxy()
Source: /docs/sdk/host/functions/createRefProxy
> **createRefProxy**(`target`, `component`): [`Ref`](/docs/sdk/messages/classes/Ref)
Defined in: [host/componentCore.ts:263](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L263)
## Parameters
### target
[`Ref`](/docs/sdk/messages/classes/Ref)
### component
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
## Returns
[`Ref`](/docs/sdk/messages/classes/Ref)
---
# Function: exec()
Source: /docs/sdk/host/functions/exec
> **exec**(`getter`): `Promise`\<`any`\>
Defined in: [host/componentCore.ts:541](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L541)
## Parameters
### getter
`any`
## Returns
`Promise`\<`any`\>
---
# Function: getFallbackHtml()
Source: /docs/sdk/host/functions/getFallbackHtml
> **getFallbackHtml**(): `string`
Defined in: [host/myopLoader.ts:112](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L112)
Returns the complete fallback HTML as a string (for use in templates)
## Returns
`string`
---
# Function: getFallbackStyles()
Source: /docs/sdk/host/functions/getFallbackStyles
> **getFallbackStyles**(): `string`
Defined in: [host/myopLoader.ts:64](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L64)
Returns the inline styles for the fallback container
## Returns
`string`
---
# Function: getLoaderHtml()
Source: /docs/sdk/host/functions/getLoaderHtml
> **getLoaderHtml**(`fadeDuration`): `string`
Defined in: [host/myopLoader.ts:103](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L103)
Returns the complete loader HTML as a string (for use in templates)
## Parameters
### fadeDuration
`number` = `200`
## Returns
`string`
---
# Function: getLoaderStyles()
Source: /docs/sdk/host/functions/getLoaderStyles
> **getLoaderStyles**(`fadeDuration`): `string`
Defined in: [host/myopLoader.ts:45](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L45)
Returns the inline styles for the loader container
## Parameters
### fadeDuration
`number` = `200`
## Returns
`string`
---
# Function: getMyopLogoHtml()
Source: /docs/sdk/host/functions/getMyopLogoHtml
> **getMyopLogoHtml**(): `string`
Defined in: [host/myopLoader.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L36)
Returns the inline HTML string for the Myop logo SVG
## Returns
`string`
---
# Function: setDebugStyle()
Source: /docs/sdk/host/functions/setDebugStyle
> **setDebugStyle**(`id`, `type`, `top`, `container`, `componentElement`, `componentDefinitionConfig`): [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/componentCore.ts:36](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L36)
## Parameters
### id
`string`
### type
`string`
### top
`number`
### container
`HTMLElement`
### componentElement
`HTMLElement`
### componentDefinitionConfig
[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
## Returns
[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
---
# Class: HostSDK
Source: /docs/sdk/host/hostSDK/classes/HostSDK
Defined in: [host/hostSDK.ts:53](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L53)
The Host SDK is designed for integration within the host application that serves as the container for Myop components.
It provides essential functionalities and APIs for registering, managing, and communicating with Myop components.
This SDK enables seamless embedding of independently developed components into the host application, ensuring smooth interoperability and consistent user experience across various Myop component implementations.
## Constructors
### new HostSDK()
> **new HostSDK**(): [`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK)
#### Returns
[`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK)
## Properties
### components
> **components**: [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)[] = `[]`
Defined in: [host/hostSDK.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L57)
***
### components2init
> **components2init**: [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)[] = `[]`
Defined in: [host/hostSDK.ts:56](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L56)
***
### componentsLoaders
> **componentsLoaders**: [`IMyopLoader`](/docs/sdk/host/interfaces/IMyopLoader)[] = `[]`
Defined in: [host/hostSDK.ts:58](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L58)
***
### initiated
> **initiated**: `boolean` = `false`
Defined in: [host/hostSDK.ts:60](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L60)
***
### loaderHooks?
> `optional` **loaderHooks**: [`loaderHooks`](/docs/sdk/host/hostSDK/type-aliases/loaderHooks)
Defined in: [host/hostSDK.ts:309](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L309)
***
### type2InstanceCount
> **type2InstanceCount**: `Record`\<`string`, `number`\> = `{}`
Defined in: [host/hostSDK.ts:64](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L64)
***
### version
> **version**: `any`
Defined in: [host/hostSDK.ts:62](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L62)
## Methods
### assignId()
> **assignId**(`componentDefinition`): `string`
Defined in: [host/hostSDK.ts:65](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L65)
#### Parameters
##### componentDefinition
[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
#### Returns
`string`
***
### init()
> **init**(`customComponentLoaderCreators`?): `void`
Defined in: [host/hostSDK.ts:192](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L192)
#### Parameters
##### customComponentLoaderCreators?
`componentLoaderCreator`[]
#### Returns
`void`
***
### inspect()
> **inspect**(): `void`
Defined in: [host/hostSDK.ts:75](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L75)
#### Returns
`void`
***
### loadComponent()
> **loadComponent**\<`T`\>(`componentConfig`, `container`?, `options`?): `Promise`\<`T`\>
Defined in: [host/hostSDK.ts:311](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L311)
#### Type Parameters
• **T** *extends* [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent) = [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
#### Parameters
##### componentConfig
[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)
##### container?
[`Ref`](/docs/sdk/messages/classes/Ref) | `HTMLElement`
##### options?
[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
#### Returns
`Promise`\<`T`\>
***
### navigate()
> **navigate**\<`T`\>(`component`, `newComponentConfig`, `options`?): `Promise`\<`T`\>
Defined in: [host/hostSDK.ts:443](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L443)
#### Type Parameters
• **T** *extends* [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent) = [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
#### Parameters
##### component
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
##### newComponentConfig
[`IComponentConfig`](/docs/sdk/common/interfaces/IComponentConfig)
##### options?
[`navigationOptions`](/docs/sdk/host/hostSDK/type-aliases/navigationOptions)
#### Returns
`Promise`\<`T`\>
***
### send()
> **send**(`message`): `void`
Defined in: [host/hostSDK.ts:184](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L184)
#### Parameters
##### message
[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Returns
`void`
***
### Instance()
> `static` **Instance**(): [`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK)
Defined in: [host/hostSDK.ts:54](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L54)
#### Returns
[`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK)
---
# host/hostSDK
Source: /docs/sdk/host/hostSDK
The Host SDK is designed for integration within the host application that serves as the container for Myop components.
It provides essential functionalities and APIs for registering, managing, and communicating with Myop components.
This SDK enables seamless embedding of independently developed components into the host application, ensuring smooth interoperability and consistent user experience across various Myop component implementations.
## Classes
- [HostSDK](/docs/sdk/host/hostSDK/classes/HostSDK)
## Interfaces
- [IEnvironment](/docs/sdk/host/hostSDK/interfaces/IEnvironment)
- [loaderOptions](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
- [relativeLoadConfig](/docs/sdk/host/hostSDK/interfaces/relativeLoadConfig)
## Type Aliases
- [loaderHooks](/docs/sdk/host/hostSDK/type-aliases/loaderHooks)
- [navigationOptions](/docs/sdk/host/hostSDK/type-aliases/navigationOptions)
## Variables
- [hostSDK](/docs/sdk/host/hostSDK/variables/hostSDK)
---
# Interface: IEnvironment
Source: /docs/sdk/host/hostSDK/interfaces/IEnvironment
Defined in: [host/hostSDK.ts:517](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L517)
## Indexable
\[`key`: `string`\]: `any`
---
# Interface: loaderOptions
Source: /docs/sdk/host/hostSDK/interfaces/loaderOptions
Defined in: [host/hostSDK.ts:525](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L525)
## Properties
### \_environment?
> `optional` **\_environment**: [`IEnvironment`](/docs/sdk/host/hostSDK/interfaces/IEnvironment)
Defined in: [host/hostSDK.ts:534](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L534)
***
### \_hasParent?
> `optional` **\_hasParent**: `boolean`
Defined in: [host/hostSDK.ts:535](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L535)
***
### \_inspection?
> `optional` **\_inspection**: `boolean`
Defined in: [host/hostSDK.ts:536](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L536)
***
### connectProps?
> `optional` **connectProps**: `boolean`
Defined in: [host/hostSDK.ts:528](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L528)
***
### data?
> `optional` **data**: `any`
Defined in: [host/hostSDK.ts:537](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L537)
***
### elementAttributes?
> `optional` **elementAttributes**: `ElementAttributes`
Defined in: [host/hostSDK.ts:533](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L533)
***
### hidden?
> `optional` **hidden**: `boolean`
Defined in: [host/hostSDK.ts:527](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L527)
***
### hooks?
> `optional` **hooks**: [`loaderHooks`](/docs/sdk/host/hostSDK/type-aliases/loaderHooks)
Defined in: [host/hostSDK.ts:532](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L532)
***
### id?
> `optional` **id**: `string`
Defined in: [host/hostSDK.ts:526](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L526)
***
### relative?
> `optional` **relative**: [`relativeLoadConfig`](/docs/sdk/host/hostSDK/interfaces/relativeLoadConfig)
Defined in: [host/hostSDK.ts:531](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L531)
***
### skipInit?
> `optional` **skipInit**: `boolean`
Defined in: [host/hostSDK.ts:530](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L530)
***
### timeout?
> `optional` **timeout**: `number`
Defined in: [host/hostSDK.ts:529](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L529)
---
# Interface: relativeLoadConfig
Source: /docs/sdk/host/hostSDK/interfaces/relativeLoadConfig
Defined in: [host/hostSDK.ts:510](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L510)
## Properties
### child
> **child**: `null` \| `ChildNode`
Defined in: [host/hostSDK.ts:513](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L513)
***
### direction
> **direction**: `relativeLoadConfigDirection`
Defined in: [host/hostSDK.ts:514](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L514)
---
# Type Alias: loaderHooks
Source: /docs/sdk/host/hostSDK/type-aliases/loaderHooks
> **loaderHooks**: `object` & \{\} \| \{\}
Defined in: [host/hostSDK.ts:503](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L503)
## Type declaration
### afterSkinSelected()?
> `optional` **afterSkinSelected**: (`selectedSkin`) => `Promise`\<[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)\>
#### Parameters
##### selectedSkin
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
#### Returns
`Promise`\<[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)\>
---
# Type Alias: navigationOptions
Source: /docs/sdk/host/hostSDK/type-aliases/navigationOptions
> **navigationOptions**: `object` & [`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
Defined in: [host/hostSDK.ts:493](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L493)
## Type declaration
### init()?
> `optional` **init**: (`component`) => `Promise`\<`void`\>
#### Parameters
##### component
[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
#### Returns
`Promise`\<`void`\>
### skipInit?
> `optional` **skipInit**: `boolean`
### staged?
> `optional` **staged**: `boolean`
---
# Variable: hostSDK
Source: /docs/sdk/host/hostSDK/variables/hostSDK
> `const` **hostSDK**: [`HostSDK`](/docs/sdk/host/hostSDK/classes/HostSDK) = `window.myop.hostSDK`
Defined in: [host/hostSDK.ts:562](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/hostSDK.ts#L562)
---
# host
Source: /docs/sdk/host
## Classes
- [BaseMyopComponent](/docs/sdk/host/classes/BaseMyopComponent)
- [BaseMyopLoader](/docs/sdk/host/classes/BaseMyopLoader)
- [MyopExtractedWebComponent](/docs/sdk/host/classes/MyopExtractedWebComponent)
## Interfaces
- [AutoSizeOptions](/docs/sdk/host/interfaces/AutoSizeOptions)
- [AutoSizeResult](/docs/sdk/host/interfaces/AutoSizeResult)
- [IMyopComponent](/docs/sdk/host/interfaces/IMyopComponent)
- [IMyopLoader](/docs/sdk/host/interfaces/IMyopLoader)
- [MyopLoaderOptions](/docs/sdk/host/interfaces/MyopLoaderOptions)
## Type Aliases
- [FunctionifyRef](/docs/sdk/host/type-aliases/FunctionifyRef)
- [propTypes](/docs/sdk/host/type-aliases/propTypes)
## Variables
- [containerStyleObject](/docs/sdk/host/variables/containerStyleObject)
- [FALLBACK\_GRADIENT](/docs/sdk/host/variables/FALLBACK_GRADIENT)
- [fallbackStyleObject](/docs/sdk/host/variables/fallbackStyleObject)
- [LOADER\_GRADIENT](/docs/sdk/host/variables/LOADER_GRADIENT)
- [loaderStyleObject](/docs/sdk/host/variables/loaderStyleObject)
## Functions
- [actAs](/docs/sdk/host/functions/actAs)
- [connectProps](/docs/sdk/host/functions/connectProps)
- [connectRefs](/docs/sdk/host/functions/connectRefs)
- [createFallbackElement](/docs/sdk/host/functions/createFallbackElement)
- [createLoaderElement](/docs/sdk/host/functions/createLoaderElement)
- [createMyopLogoSvg](/docs/sdk/host/functions/createMyopLogoSvg)
- [createRefComponent](/docs/sdk/host/functions/createRefComponent)
- [createRefProxy](/docs/sdk/host/functions/createRefProxy)
- [exec](/docs/sdk/host/functions/exec)
- [getFallbackHtml](/docs/sdk/host/functions/getFallbackHtml)
- [getFallbackStyles](/docs/sdk/host/functions/getFallbackStyles)
- [getLoaderHtml](/docs/sdk/host/functions/getLoaderHtml)
- [getLoaderStyles](/docs/sdk/host/functions/getLoaderStyles)
- [getMyopLogoHtml](/docs/sdk/host/functions/getMyopLogoHtml)
- [setDebugStyle](/docs/sdk/host/functions/setDebugStyle)
## References
### CleanupHandler
Re-exports [CleanupHandler](/docs/sdk/common/type-aliases/CleanupHandler)
***
### hostSDK
Re-exports [hostSDK](/docs/sdk/host/hostSDK/variables/hostSDK)
***
### loaderOptions
Re-exports [loaderOptions](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
---
# Interface: AutoSizeOptions
Source: /docs/sdk/host/interfaces/AutoSizeOptions
Defined in: [host/components/IMyopComponent.ts:29](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L29)
Options for observeAutoSize method
## Properties
### explicitHeight?
> `optional` **explicitHeight**: `string` \| `number`
Defined in: [host/components/IMyopComponent.ts:43](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L43)
Explicit height set by host - if defined, don't auto-size height
***
### explicitWidth?
> `optional` **explicitWidth**: `string` \| `number`
Defined in: [host/components/IMyopComponent.ts:41](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L41)
Explicit width set by host - if defined, don't auto-size width
***
### forceAutoSize?
> `optional` **forceAutoSize**: `boolean`
Defined in: [host/components/IMyopComponent.ts:45](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L45)
Force auto-size even if container has dimensions
***
### loaderMinHeight?
> `optional` **loaderMinHeight**: `number`
Defined in: [host/components/IMyopComponent.ts:47](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L47)
Min height used by loader to detect collapse (default: 50)
***
### maxHeight?
> `optional` **maxHeight**: `string` \| `number`
Defined in: [host/components/IMyopComponent.ts:39](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L39)
Maximum height constraint
***
### maxWidth?
> `optional` **maxWidth**: `string` \| `number`
Defined in: [host/components/IMyopComponent.ts:35](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L35)
Maximum width constraint
***
### minHeight?
> `optional` **minHeight**: `string` \| `number`
Defined in: [host/components/IMyopComponent.ts:37](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L37)
Minimum height constraint
***
### minWidth?
> `optional` **minWidth**: `string` \| `number`
Defined in: [host/components/IMyopComponent.ts:33](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L33)
Minimum width constraint
***
### onSizeChange()?
> `optional` **onSizeChange**: (`result`) => `void`
Defined in: [host/components/IMyopComponent.ts:31](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L31)
Callback called with size info whenever size changes
#### Parameters
##### result
[`AutoSizeResult`](/docs/sdk/host/interfaces/AutoSizeResult)
#### Returns
`void`
---
# Interface: AutoSizeResult
Source: /docs/sdk/host/interfaces/AutoSizeResult
Defined in: [host/components/IMyopComponent.ts:15](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L15)
Result returned by observeAutoSize callback
## Properties
### autoSizingHeight
> **autoSizingHeight**: `boolean`
Defined in: [host/components/IMyopComponent.ts:23](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L23)
Whether height is being auto-sized
***
### autoSizingWidth
> **autoSizingWidth**: `boolean`
Defined in: [host/components/IMyopComponent.ts:21](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L21)
Whether width is being auto-sized
***
### height
> **height**: `number`
Defined in: [host/components/IMyopComponent.ts:19](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L19)
Current height (from content)
***
### width
> **width**: `number`
Defined in: [host/components/IMyopComponent.ts:17](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L17)
Current width (from content)
---
# Interface: IMyopComponent\
Source: /docs/sdk/host/interfaces/IMyopComponent
Defined in: [host/components/IMyopComponent.ts:55](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L55)
## Type Parameters
• **P** = `any`
• **R** = `any`
## Properties
### componentDefinition
> **componentDefinition**: [`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
Defined in: [host/components/IMyopComponent.ts:65](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L65)
***
### container
> **container**: `HTMLElement`
Defined in: [host/components/IMyopComponent.ts:67](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L67)
***
### dispose()
> **dispose**: () => `void`
Defined in: [host/components/IMyopComponent.ts:83](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L83)
#### Returns
`void`
***
### element?
> `optional` **element**: `HTMLElement`
Defined in: [host/components/IMyopComponent.ts:70](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L70)
***
### id
> **id**: `string`
Defined in: [host/components/IMyopComponent.ts:57](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L57)
***
### initiated()
> **initiated**: () => `Promise`\<`any`\>
Defined in: [host/components/IMyopComponent.ts:81](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L81)
#### Returns
`Promise`\<`any`\>
***
### isInitiated
> **isInitiated**: `boolean`
Defined in: [host/components/IMyopComponent.ts:59](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L59)
***
### markedForDisposed
> **markedForDisposed**: `boolean`
Defined in: [host/components/IMyopComponent.ts:61](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L61)
***
### observeAutoSize()?
> `optional` **observeAutoSize**: (`options`?) => [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/components/IMyopComponent.ts:97](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L97)
Observes the iframe content size and automatically syncs it to the iframe element.
Only available for iframe-based components. Uses direct contentDocument access.
#### Parameters
##### options?
[`AutoSizeOptions`](/docs/sdk/host/interfaces/AutoSizeOptions)
Configuration options including size change callback and min/max constraints
#### Returns
[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Cleanup function to stop observing
***
### onMessageReceived()
> **onMessageReceived**: (`msg`) => `boolean`
Defined in: [host/components/IMyopComponent.ts:79](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L79)
#### Parameters
##### msg
[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Returns
`boolean`
***
### parent?
> `optional` **parent**: [`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)
Defined in: [host/components/IMyopComponent.ts:99](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L99)
***
### props
> **props**: `P`
Defined in: [host/components/IMyopComponent.ts:101](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L101)
***
### refs
> **refs**: `R`
Defined in: [host/components/IMyopComponent.ts:103](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L103)
***
### send()
> **send**: (`msg`) => [`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
Defined in: [host/components/IMyopComponent.ts:72](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L72)
#### Parameters
##### msg
[`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
#### Returns
[`CleanupHandler`](/docs/sdk/common/type-aliases/CleanupHandler)
***
### setInitiated()
> **setInitiated**: () => `void`
Defined in: [host/components/IMyopComponent.ts:63](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L63)
#### Returns
`void`
## Methods
### bind()
#### Call Signature
> **bind**(`messageType`, `handler`): `void`
Defined in: [host/components/IMyopComponent.ts:74](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L74)
##### Parameters
###### messageType
`MyopMessageKey`
###### handler
() => `boolean`
##### Returns
`void`
#### Call Signature
> **bind**\<`T`\>(`messageType`, `handler`): `void`
Defined in: [host/components/IMyopComponent.ts:76](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L76)
##### Type Parameters
• **T** *extends* [`BaseMyopMessage`](/docs/sdk/messages/classes/BaseMyopMessage)
##### Parameters
###### messageType
`MyopMessageKey`
###### handler
(`message`) => `boolean`
##### Returns
`void`
***
### hide()
> **hide**(): `void`
Defined in: [host/components/IMyopComponent.ts:85](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L85)
#### Returns
`void`
***
### inspect()
> **inspect**(): `void`
Defined in: [host/components/IMyopComponent.ts:89](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L89)
#### Returns
`void`
***
### show()
> **show**(): `void`
Defined in: [host/components/IMyopComponent.ts:87](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/components/IMyopComponent.ts#L87)
#### Returns
`void`
---
# Interface: IMyopLoader
Source: /docs/sdk/host/interfaces/IMyopLoader
Defined in: [host/loaders/IMyopLoader.ts:5](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L5)
## Properties
### load()
> **load**: (`componentDefinition`, `skin`, `container`, `options`?) => `Promise`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\>
Defined in: [host/loaders/IMyopLoader.ts:7](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L7)
#### Parameters
##### componentDefinition
[`IComponentDefinitionConfig`](/docs/sdk/common/interfaces/IComponentDefinitionConfig)
##### skin
[`ISkinConfig`](/docs/sdk/common/interfaces/ISkinConfig)
##### container
`HTMLElement`
##### options?
[`loaderOptions`](/docs/sdk/host/hostSDK/interfaces/loaderOptions)
#### Returns
`Promise`\<[`IMyopComponent`](/docs/sdk/host/interfaces/IMyopComponent)\>
***
### type
> **type**: `"IframeLoader"` \| `"WebComponentLoader"` \| `"HTMLLoader"` \| `"MinimizedLoader"`
Defined in: [host/loaders/IMyopLoader.ts:6](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/loaders/IMyopLoader.ts#L6)
---
# Interface: MyopLoaderOptions
Source: /docs/sdk/host/interfaces/MyopLoaderOptions
Defined in: [host/myopLoader.ts:121](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L121)
Interface for loader options used by host frameworks
## Properties
### fadeDuration?
> `optional` **fadeDuration**: `number`
Defined in: [host/myopLoader.ts:123](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L123)
Fade duration in milliseconds (default: 200)
***
### opacity?
> `optional` **opacity**: `number`
Defined in: [host/myopLoader.ts:125](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L125)
Initial opacity (default: 1)
---
# Type Alias: FunctionifyRef\
Source: /docs/sdk/host/type-aliases/FunctionifyRef
> **FunctionifyRef**\<`T`\>: `{ [K in keyof T]: T[K] extends (args: infer A) => infer R ? (args: A) => Promise : T[K] }`
Defined in: [host/componentCore.ts:549](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L549)
## Type Parameters
• **T** = `any`
---
# Type Alias: propTypes\
Source: /docs/sdk/host/type-aliases/propTypes
> **propTypes**\<`T`\>: `{ [Property in keyof T]: T[Property] extends { mode: "input" } ? T[Property]["type"] : Promise }`
Defined in: [host/componentCore.ts:534](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/componentCore.ts#L534)
## Type Parameters
• **T** *extends* `any`[]
---
# Variable: FALLBACK\_GRADIENT
Source: /docs/sdk/host/variables/FALLBACK_GRADIENT
> `const` **FALLBACK\_GRADIENT**: `"linear-gradient(135deg, #9CA3AF 0%, #D1D5DB 50%, #E5E7EB 100%)"` = `"linear-gradient(135deg, #9CA3AF 0%, #D1D5DB 50%, #E5E7EB 100%)"`
Defined in: [host/myopLoader.ts:13](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L13)
---
# Variable: LOADER\_GRADIENT
Source: /docs/sdk/host/variables/LOADER_GRADIENT
> `const` **LOADER\_GRADIENT**: `"linear-gradient(135deg, #FF8651 0%, #FFBEA8 50%, #A397F5 100%)"` = `"linear-gradient(135deg, #FF8651 0%, #FFBEA8 50%, #A397F5 100%)"`
Defined in: [host/myopLoader.ts:11](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L11)
---
# Variable: containerStyleObject
Source: /docs/sdk/host/variables/containerStyleObject
> `const` **containerStyleObject**: `object`
Defined in: [host/myopLoader.ts:156](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L156)
## Type declaration
### alignItems
> **alignItems**: `string` = `"center"`
### bottom
> **bottom**: `number` = `0`
### display
> **display**: `string` = `"flex"`
### justifyContent
> **justifyContent**: `string` = `"center"`
### left
> **left**: `number` = `0`
### position
> **position**: `"absolute"`
### right
> **right**: `number` = `0`
### top
> **top**: `number` = `0`
### zIndex
> **zIndex**: `number` = `1`
---
# Variable: fallbackStyleObject
Source: /docs/sdk/host/variables/fallbackStyleObject
> `const` **fallbackStyleObject**: `object`
Defined in: [host/myopLoader.ts:144](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L144)
## Type declaration
### alignItems
> **alignItems**: `string` = `"center"`
### background
> **background**: `string` = `FALLBACK_GRADIENT`
### bottom
> **bottom**: `number` = `0`
### display
> **display**: `string` = `"flex"`
### justifyContent
> **justifyContent**: `string` = `"center"`
### left
> **left**: `number` = `0`
### position
> **position**: `"absolute"`
### right
> **right**: `number` = `0`
### top
> **top**: `number` = `0`
---
# Variable: loaderStyleObject
Source: /docs/sdk/host/variables/loaderStyleObject
> `const` **loaderStyleObject**: `object`
Defined in: [host/myopLoader.ts:131](https://github.com/hadarge/myop/blob/main/myop-sdk/src/host/myopLoader.ts#L131)
CSS-in-JS style objects for frameworks that support them
## Type declaration
### alignItems
> **alignItems**: `string` = `"center"`
### background
> **background**: `string` = `LOADER_GRADIENT`
### bottom
> **bottom**: `number` = `0`
### display
> **display**: `string` = `"flex"`
### justifyContent
> **justifyContent**: `string` = `"center"`
### left
> **left**: `number` = `0`
### position
> **position**: `"absolute"`
### right
> **right**: `number` = `0`
### top
> **top**: `number` = `0`
### zIndex
> **zIndex**: `number` = `1`
---
# sdk
Source: /docs/sdk
Myop SDK
Dynamic UI component management for modern web applications
}
/>
// Or use the default Myop fallback explicitly
}
/>
```
## API Reference
### Exports
| Export | Description |
|--------|-------------|
| `MyopComponent` | Main component for embedding Myop components |
| `MyopLoader` | Default Myop-branded loading indicator (opt-in) |
| `MyopFallback` | Default Myop-branded error fallback |
| `preloadComponents` | Preload components for faster rendering |
| `isPreloaded` | Check if a component is cached |
| `enableLocalDev` | Enable local development mode |
| `setCloudRepositoryUrl` | Set custom server URL |
| `setCloudRepository` | Set custom CloudRepository instance |
| `getCloudRepository` | Get current CloudRepository instance |
| `setEnvironment` | Set default environment |
| `IComponentInstanceConfig` | TypeScript interface for component config |
| `IPropTypes` | TypeScript interface for component props |
## License
MIT
---
# index
Source: /docs/sdk-react/index
## References
### IComponentInstanceConfig
Re-exports [IComponentInstanceConfig](/docs/sdk-react/components/MyopV2ReactComponent/interfaces/IComponentInstanceConfig)
***
### IMyopComponentProps
Re-exports [IMyopComponentProps](/docs/sdk-react/components/MyopV2ReactComponent/interfaces/IMyopComponentProps)
***
### IPropTypes
Re-exports [IPropTypes](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/IPropTypes)
***
### ITypedMyopComponent
Re-exports [ITypedMyopComponent](/docs/sdk-react/components/MyopV2ReactComponent/type-aliases/ITypedMyopComponent)
***
### MyopComponent
Renames and re-exports [MyopV2ReactComponent](/docs/sdk-react/components/MyopV2ReactComponent/functions/MyopV2ReactComponent)
***
### MyopContainer
Renames and re-exports [MyopReactComponent](/docs/sdk-react/components/MyopReactComponent/functions/MyopReactComponent)
***
### MyopFallback
Re-exports [MyopFallback](/docs/sdk-react/components/MyopFallback/functions/MyopFallback)
***
### MyopLoader
Re-exports [MyopLoader](/docs/sdk-react/components/MyopLoader/functions/MyopLoader)
***
### MyopV2Container
Renames and re-exports [MyopV2ReactComponent](/docs/sdk-react/components/MyopV2ReactComponent/functions/MyopV2ReactComponent)
---
# @myop/react
Source: /docs/sdk-react/modules
## Modules
- [components/MyopFallback](/docs/sdk-react/components/MyopFallback)
- [components/MyopLoader](/docs/sdk-react/components/MyopLoader)
- [components/MyopReactComponent](/docs/sdk-react/components/MyopReactComponent)
- [components/MyopV2ReactComponent](/docs/sdk-react/components/MyopV2ReactComponent)
- [index](/docs/sdk-react/index)
---
# Function: MyopComponent()
Source: /docs/sdk-react-native/MyopComponent/functions/MyopComponent
> **MyopComponent**(`props`): `ReactNode`
Defined in: [src/MyopComponent.tsx:211](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L211)
## Parameters
### props
`IPropTypes` & `RefAttributes`\<[`MyopComponentRef`](/docs/sdk-react-native/MyopComponent/interfaces/MyopComponentRef)\>
## Returns
`ReactNode`
---
# MyopComponent
Source: /docs/sdk-react-native/MyopComponent
## Interfaces
- [IElementProxy](/docs/sdk-react-native/MyopComponent/interfaces/IElementProxy)
- [IMyopComponentProxy](/docs/sdk-react-native/MyopComponent/interfaces/IMyopComponentProxy)
- [MyopComponentRef](/docs/sdk-react-native/MyopComponent/interfaces/MyopComponentRef)
- [MyopCrashInfo](/docs/sdk-react-native/MyopComponent/interfaces/MyopCrashInfo)
## Functions
- [MyopComponent](/docs/sdk-react-native/MyopComponent/functions/MyopComponent)
---
# Interface: IElementProxy
Source: /docs/sdk-react-native/MyopComponent/interfaces/IElementProxy
Defined in: [src/MyopComponent.tsx:94](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L94)
Element proxy for accessing/modifying the component's DOM element
## Properties
### get()
> **get**: (`path`) => `Promise`\<`any`\>
Defined in: [src/MyopComponent.tsx:98](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L98)
Get a property from the element (e.g., element.style.background) - returns Promise
#### Parameters
##### path
`string`
#### Returns
`Promise`\<`any`\>
***
### set()
> **set**: (`path`, `value`) => `void`
Defined in: [src/MyopComponent.tsx:96](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L96)
Set a property on the element (e.g., element.style.background = 'red')
#### Parameters
##### path
`string`
##### value
`any`
#### Returns
`void`
***
### style
> **style**: `object`
Defined in: [src/MyopComponent.tsx:100](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L100)
Style proxy for convenient access
#### get()
> **get**: (`property`) => `Promise`\<`string`\>
##### Parameters
###### property
`string`
##### Returns
`Promise`\<`string`\>
#### set()
> **set**: (`property`, `value`) => `void`
##### Parameters
###### property
`string`
###### value
`string`
##### Returns
`void`
---
# Interface: IMyopComponentProxy
Source: /docs/sdk-react-native/MyopComponent/interfaces/IMyopComponentProxy
Defined in: [src/MyopComponent.tsx:138](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L138)
Proxy interface for window.myopComponent in WebView
Mirrors the IMyopComponent interface from @myop/sdk
## Properties
### dispose()
> **dispose**: () => `void`
Defined in: [src/MyopComponent.tsx:152](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L152)
Dispose the component
#### Returns
`void`
***
### element
> **element**: [`IElementProxy`](/docs/sdk-react-native/MyopComponent/interfaces/IElementProxy)
Defined in: [src/MyopComponent.tsx:149](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L149)
Element proxy for DOM manipulation
***
### hide()
> **hide**: () => `void`
Defined in: [src/MyopComponent.tsx:155](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L155)
Hide the component
#### Returns
`void`
***
### id
> **id**: `string`
Defined in: [src/MyopComponent.tsx:140](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L140)
Component ID
***
### inspect()
> **inspect**: () => `void`
Defined in: [src/MyopComponent.tsx:161](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L161)
Inspect the component (debug)
#### Returns
`void`
***
### props
> **props**: `object`
Defined in: [src/MyopComponent.tsx:143](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L143)
Props object with myop_init_interface and myop_cta_handler
#### myop\_cta\_handler
> **myop\_cta\_handler**: `null` \| (`action`, `payload`?) => `void`
#### myop\_init\_interface()
> **myop\_init\_interface**: (`data`) => `void`
##### Parameters
###### data
`any`
##### Returns
`void`
***
### show()
> **show**: () => `void`
Defined in: [src/MyopComponent.tsx:158](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L158)
Show the component
#### Returns
`void`
---
# Interface: MyopComponentRef
Source: /docs/sdk-react-native/MyopComponent/interfaces/MyopComponentRef
Defined in: [src/MyopComponent.tsx:127](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L127)
Imperative handle exposed via `ref` on ``.
## Properties
### reload()
> **reload**: () => `void`
Defined in: [src/MyopComponent.tsx:129](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L129)
Force a remount of the underlying WebView. Counts toward the retry cap.
#### Returns
`void`
***
### reset()
> **reset**: () => `void`
Defined in: [src/MyopComponent.tsx:131](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L131)
Reset the crash counter and fallback state, then remount.
#### Returns
`void`
---
# Interface: MyopCrashInfo
Source: /docs/sdk-react-native/MyopComponent/interfaces/MyopCrashInfo
Defined in: [src/MyopComponent.tsx:109](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L109)
Information about a WebView renderer crash.
## Properties
### attempt
> **attempt**: `number`
Defined in: [src/MyopComponent.tsx:117](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L117)
1-based crash count within the current mount.
***
### native?
> `optional` **native**: `any`
Defined in: [src/MyopComponent.tsx:121](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L121)
Raw native event payload, when available.
***
### reason
> **reason**: `"renderer-gone"` \| `"process-terminated"` \| `"unknown"`
Defined in: [src/MyopComponent.tsx:115](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L115)
- `renderer-gone`: Android `onRenderProcessGone`
- `process-terminated`: iOS `onContentProcessDidTerminate`
- `unknown`: a crash signal we couldn't classify
***
### willAutoRecover
> **willAutoRecover**: `boolean`
Defined in: [src/MyopComponent.tsx:119](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopComponent.tsx#L119)
False when the retry cap has been reached or the consumer opted out.
---
# Function: MyopFallback()
Source: /docs/sdk-react-native/MyopFallback/functions/MyopFallback
> **MyopFallback**(): `any`
Defined in: [src/MyopFallback.tsx:63](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopFallback.tsx#L63)
## Returns
`any`
---
# MyopFallback
Source: /docs/sdk-react-native/MyopFallback
## Functions
- [MyopFallback](/docs/sdk-react-native/MyopFallback/functions/MyopFallback)
---
# Function: MyopLoader()
Source: /docs/sdk-react-native/MyopLoader/functions/MyopLoader
> **MyopLoader**(`props`): `ReactNode`
Defined in: [src/MyopLoader.tsx:103](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopLoader.tsx#L103)
## Parameters
### props
`RefAttributes`\<[`MyopLoaderRef`](/docs/sdk-react-native/MyopLoader/interfaces/MyopLoaderRef)\>
## Returns
`ReactNode`
---
# MyopLoader
Source: /docs/sdk-react-native/MyopLoader
## Interfaces
- [MyopLoaderRef](/docs/sdk-react-native/MyopLoader/interfaces/MyopLoaderRef)
## Functions
- [MyopLoader](/docs/sdk-react-native/MyopLoader/functions/MyopLoader)
---
# Interface: MyopLoaderRef
Source: /docs/sdk-react-native/MyopLoader/interfaces/MyopLoaderRef
Defined in: [src/MyopLoader.tsx:5](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopLoader.tsx#L5)
## Properties
### fadeOut()
> **fadeOut**: (`duration`?) => `void`
Defined in: [src/MyopLoader.tsx:6](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/MyopLoader.tsx#L6)
#### Parameters
##### duration?
`number`
#### Returns
`void`
---
# @myop/react-native
Source: /docs/sdk-react-native
Official React Native bindings for embedding [Myop](https://myop.dev) components in your React Native applications.
Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.
[](https://www.npmjs.com/package/@myop/react-native)
[](https://opensource.org/licenses/MIT)
[](https://myop.dev/discord)
[Website](https://www.myop.dev/) | [Documentation](https://docs.myop.dev/) | [Dashboard](https://dashboard.myop.dev/) | [Discord](https://myop.dev/discord)
## Installation
```bash
npm install @myop/react-native
```
Install the required peer dependency:
```bash
npm install react-native-webview
```
## Auto-Generated React Native Components
Myop automatically generates a typed React Native component package for every component you create in the [dashboard](https://dashboard.myop.dev/). Install it directly via npm:
```bash
npm install https://cloud.myop.dev/npm/{component-id}/react-native
```
Then import and use it like any React Native component. For example, if you created a table component called "users-table" in the dashboard:
```tsx
import { UsersTable } from "@myop/users-table";
export default function App() {
const users = [
{ id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
{ id: 2, name: "Bob", email: "bob@example.com", role: "User" },
{ id: 3, name: "Charlie", email: "charlie@example.com", role: "User" },
];
return (
{
console.log("Selected user:", payload.rowData);
}}
onDeleteClicked={(payload) => {
deleteUser(payload.userId);
}}
onExportRequested={(payload) => {
exportToFormat(payload.format); // "csv" | "xlsx"
}}
style={{ flex: 1 }}
/>
);
}
```
**Why this is powerful:**
- **Fully typed** — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
- **Auto loaded** — Components are fetched and rendered automatically, no manual setup required
- **Not in your code** — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
- **Zero bundle impact** — Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime via WebView, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding to your application bundle
**Environment options:**
Set the default environment for all components using `setEnvironment`:
```tsx
import { setEnvironment } from "@myop/react-native";
// Set default environment for all component loads
setEnvironment("staging");
```
You can also override the environment directly on a specific component:
```tsx
```
Environments are fully configurable in the [dashboard](https://dashboard.myop.dev/), allowing you to test changes in staging before publishing to production.
For more details on auto-generated packages, see the [Auto-Generated Packages documentation](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages).
## Requirements
| Dependency | Version |
|------------|---------|
| React | >= 16.8.0 |
| React Native | >= 0.60.0 |
| react-native-webview | >= 11.0.0 |
## Quick Start
```tsx
import { MyopComponent } from '@myop/react-native';
export default function App() {
return (
);
}
```
## Usage
### Loading by Component ID
The simplest way to embed a Myop component:
```tsx
```
### Passing Data to Components
Use the `data` prop to send data to your component's `myop_init_interface`:
```tsx
const [userData, setUserData] = useState({ name: 'John', theme: 'dark' });
```
When `data` changes, `myop_init_interface` is automatically called with the new value.
### Handling Component Events
Listen for events from your component's `myop_cta_handler`:
```tsx
{
switch (action) {
case 'submit':
handleSubmit(payload);
break;
case 'navigate':
navigation.navigate(payload.screen);
break;
}
}}
style={{ flex: 1 }}
/>
```
### Component Proxy API
Access the component instance for direct manipulation:
```tsx
import { IMyopComponentProxy } from '@myop/react-native';
const [component, setComponent] = useState(null);
setComponent(proxy)}
style={{ flex: 1 }}
/>
// Send data to component
component?.props.myop_init_interface({ theme: 'dark' });
// DOM manipulation
component?.element.style.set('opacity', '0.5');
component?.element.set('style.background', 'red');
// Get values (async)
const opacity = await component?.element.style.get('opacity');
const scrollTop = await component?.element.get('scrollTop');
// Lifecycle methods
component?.hide();
component?.show();
component?.dispose();
```
### Loading & Error States
By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.
### Using the Default Myop Loader
```tsx
import { MyopComponent, MyopLoader } from '@myop/react-native';
} // Opt-in to default Myop loader
fadeDuration={300}
style={{ flex: 1 }}
/>
```
### Custom Loading State
Provide your own loading component:
```tsx
import { ActivityIndicator, View } from 'react-native';
}
fadeDuration={300}
style={{ flex: 1 }}
/>
```
### Custom Error Fallback
Display a custom view when the component fails to load:
```tsx
import { MyopComponent, MyopFallback } from '@myop/react-native';
Unable to load component
}
onError={(error) => console.error('Load failed:', error)}
style={{ flex: 1 }}
/>
// Or use the default Myop fallback explicitly
}
style={{ flex: 1 }}
/>
```
### Using Component Configuration
For advanced use cases, pass a full configuration object:
```tsx
import { MyopComponent, IComponentInstanceConfig } from '@myop/react-native';
const config: IComponentInstanceConfig = {
id: 'instance-1',
componentId: 'abc123',
componentName: 'MyComponent',
skinSelector: {
type: 'Dedicated',
skin: { id: 'skin-1' }
}
};
```
### Environment Selection
Target different deployment environments:
```tsx
```
### WebView Behavior
Control scroll, zoom, and text selection:
```tsx
```
Pass through any other `react-native-webview` prop via `webViewProps` — for example, to debug the screen with Safari/Chrome DevTools:
```tsx
```
### Crash Recovery
The OS can kill the WebView renderer process under memory pressure (Android `onRenderProcessGone`) or for similar reasons on iOS (`onContentProcessDidTerminate`). `MyopComponent` detects these crashes and automatically remounts a fresh WebView, up to `maxCrashRetries` consecutive crashes per mount (default `3`). After the cap, the fallback is shown instead.
```tsx
{
console.warn(`Myop renderer crashed: ${info.reason} (attempt ${info.attempt})`);
// Return `false` to opt out of auto-recovery and show the fallback instead.
// Return nothing (or `true`) to let MyopComponent remount.
}}
style={{ flex: 1 }}
/>
```
The `onCrash` callback receives a `MyopCrashInfo` object:
| Field | Type | Description |
|-------|------|-------------|
| `reason` | `'renderer-gone' \| 'process-terminated' \| 'unknown'` | `renderer-gone` = Android, `process-terminated` = iOS |
| `attempt` | `number` | 1-based crash count within the current mount |
| `willAutoRecover` | `boolean` | `false` once the retry cap has been hit |
| `native` | `any` | Raw native event payload, when available |
#### Imperative ref API
`MyopComponent` accepts a `ref` of type `MyopComponentRef`:
```tsx
import { useRef } from 'react';
import { MyopComponent, MyopComponentRef } from '@myop/react-native';
const ref = useRef(null);
// Force a remount (counts toward the retry cap)
ref.current?.reload();
// Clear the crash counter and remount fresh
ref.current?.reset();
```
`reload()` is useful for retry UIs ("Tap to retry" buttons). `reset()` is what you typically call after the fallback has been shown — for example, when the user navigates back to the screen.
> **Note:** `onContentProcessDidTerminate` and `onRenderProcessGone` are owned by `MyopComponent` and cannot be overridden via `webViewProps`. Use `onCrash` instead.
### Preloading Components
Preload components for instant rendering when they're displayed:
```tsx
import { preloadComponents, isPreloaded } from '@myop/react-native';
// Preload on app startup or before navigating
await preloadComponents(['component-1', 'component-2']);
// Check if component is preloaded
if (isPreloaded('component-1')) {
// Component will render instantly without loader
}
```
### Configuration APIs
Configure the CloudRepository for custom endpoints or local development:
```tsx
import {
enableLocalDev,
setCloudRepositoryUrl,
setCloudRepository,
setEnvironment,
getCloudRepository
} from '@myop/react-native';
// Enable local development mode (connects to localhost:9292)
enableLocalDev();
// Use a custom endpoint
setCloudRepositoryUrl('https://custom.myop.dev');
// Set default environment for all components
setEnvironment('staging');
// Get the current CloudRepository instance
const repo = getCloudRepository();
```
## API Reference
### MyopComponent Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `componentId` | `string` | - | Component ID to load from Myop cloud |
| `componentConfig` | `IComponentInstanceConfig` | - | Full component configuration object |
| `data` | `any` | - | Data passed to `myop_init_interface` |
| `on` | `(action: string, payload?: any) => void` | - | Handler for `myop_cta_handler` events |
| `onLoad` | `(proxy: IMyopComponentProxy) => void` | - | Callback with component proxy when loaded |
| `onError` | `(error: string) => void` | - | Callback when component fails to load |
| `loader` | `ReactNode` | `null` | Loading component (default: no loader). Use `` for default Myop loader |
| `fallback` | `ReactNode` | `` | Error fallback component (default: Myop-branded fallback) |
| `fadeDuration` | `number` | `200` | Loader fade-out duration in ms |
| `environment` | `string` | `"production"` | Target environment |
| `preview` | `boolean` | `false` | Load preview version of component |
| `scrollEnabled` | `boolean` | `false` | Enable WebView scrolling |
| `zoomEnabled` | `boolean` | `false` | Enable pinch-to-zoom |
| `selectionEnabled` | `boolean` | `false` | Enable text selection |
| `webViewProps` | `WebViewProps` | - | Extra props forwarded to the underlying `` (e.g. `{ webviewDebuggingEnabled: true }`). Controlled props (`ref`, `source`, `onMessage`, `onRenderProcessGone`, `onContentProcessDidTerminate`) can't be overridden |
| `onCrash` | `(info: MyopCrashInfo) => boolean \| void` | - | Called when the WebView renderer is killed by the OS. Return `false` to opt out of auto-recovery |
| `maxCrashRetries` | `number` | `3` | Max consecutive renderer crashes to auto-recover from per mount |
| `style` | `StyleProp` | - | Container styles |
Plus an imperative `ref` of type `MyopComponentRef` with `reload()` and `reset()` methods (see [Crash Recovery](#crash-recovery)).
Either `componentId` or `componentConfig` must be provided.
### Exported Components
| Component | Description |
|-----------|-------------|
| `MyopComponent` | Main component for embedding Myop content |
| `MyopLoader` | Default animated loading state |
| `MyopFallback` | Default error/fallback state |
### Exported Functions
| Function | Description |
|----------|-------------|
| `preloadComponents(ids, env?, preview?)` | Preload components for instant rendering |
| `isPreloaded(componentId, env?, preview?)` | Check if a component is cached |
| `enableLocalDev()` | Enable local development mode (localhost:9292) |
| `setCloudRepositoryUrl(url)` | Set a custom CloudRepository URL |
| `setCloudRepository(repository)` | Set a custom CloudRepository instance |
| `setEnvironment(env)` | Set the default environment |
| `getCloudRepository()` | Get the current CloudRepository instance |
### Types
```typescript
interface IMyopComponentProxy {
id: string;
props: {
myop_init_interface: (data: any) => void;
myop_cta_handler: ((action: string, payload?: any) => void) | null;
};
element: IElementProxy;
dispose: () => void;
hide: () => void;
show: () => void;
inspect: () => void;
}
interface IElementProxy {
set: (path: string, value: any) => void;
get: (path: string) => Promise;
style: {
set: (property: string, value: string) => void;
get: (property: string) => Promise;
};
}
interface IComponentInstanceConfig {
id: string;
componentId: string;
componentName: string;
skinSelector: ISkinSelectorConfig;
nestedComponents?: IComponentInstanceConfig[];
resolvedExperiences?: IExperience[];
resolvedNestedComponents?: IComponentConfig[];
[key: string]: any;
}
interface MyopLoaderRef {
fadeOut: (duration?: number) => void;
}
interface MyopCrashInfo {
reason: 'renderer-gone' | 'process-terminated' | 'unknown';
attempt: number;
willAutoRecover: boolean;
native?: any;
}
interface MyopComponentRef {
reload: () => void;
reset: () => void;
}
```
## License
MIT
---
# index
Source: /docs/sdk-react-native/index
## References
### IComponentInstanceConfig
Re-exports [IComponentInstanceConfig](/docs/sdk-react-native/types/interfaces/IComponentInstanceConfig)
***
### IMyopComponentProxy
Re-exports [IMyopComponentProxy](/docs/sdk-react-native/MyopComponent/interfaces/IMyopComponentProxy)
***
### MyopComponent
Re-exports [MyopComponent](/docs/sdk-react-native/MyopComponent/functions/MyopComponent)
***
### MyopComponentRef
Re-exports [MyopComponentRef](/docs/sdk-react-native/MyopComponent/interfaces/MyopComponentRef)
***
### MyopCrashInfo
Re-exports [MyopCrashInfo](/docs/sdk-react-native/MyopComponent/interfaces/MyopCrashInfo)
***
### MyopFallback
Re-exports [MyopFallback](/docs/sdk-react-native/MyopFallback/functions/MyopFallback)
***
### MyopLoader
Re-exports [MyopLoader](/docs/sdk-react-native/MyopLoader/functions/MyopLoader)
***
### MyopLoaderRef
Re-exports [MyopLoaderRef](/docs/sdk-react-native/MyopLoader/interfaces/MyopLoaderRef)
---
# @myop/react-native
Source: /docs/sdk-react-native/modules
## Modules
- [index](/docs/sdk-react-native/index)
- [MyopComponent](/docs/sdk-react-native/MyopComponent)
- [MyopFallback](/docs/sdk-react-native/MyopFallback)
- [MyopLoader](/docs/sdk-react-native/MyopLoader)
- [types](/docs/sdk-react-native/types)
---
# types
Source: /docs/sdk-react-native/types
## Interfaces
- [IComponentConfig](/docs/sdk-react-native/types/interfaces/IComponentConfig)
- [IComponentInstanceConfig](/docs/sdk-react-native/types/interfaces/IComponentInstanceConfig)
- [IExperience](/docs/sdk-react-native/types/interfaces/IExperience)
- [ISkinSelectorConfig](/docs/sdk-react-native/types/interfaces/ISkinSelectorConfig)
---
# Interface: IComponentConfig
Source: /docs/sdk-react-native/types/interfaces/IComponentConfig
Defined in: [src/types.ts:12](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L12)
## Indexable
\[`key`: `string`\]: `any`
---
# Interface: IComponentInstanceConfig
Source: /docs/sdk-react-native/types/interfaces/IComponentInstanceConfig
Defined in: [src/types.ts:16](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L16)
## Indexable
\[`key`: `string`\]: `any`
## Properties
### componentId
> **componentId**: `string`
Defined in: [src/types.ts:18](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L18)
***
### componentName
> **componentName**: `string`
Defined in: [src/types.ts:19](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L19)
***
### id
> **id**: `string`
Defined in: [src/types.ts:17](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L17)
***
### nestedComponents?
> `optional` **nestedComponents**: [`IComponentInstanceConfig`](/docs/sdk-react-native/types/interfaces/IComponentInstanceConfig)[]
Defined in: [src/types.ts:21](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L21)
***
### resolvedExperiences?
> `optional` **resolvedExperiences**: [`IExperience`](/docs/sdk-react-native/types/interfaces/IExperience)[]
Defined in: [src/types.ts:22](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L22)
***
### resolvedNestedComponents?
> `optional` **resolvedNestedComponents**: [`IComponentConfig`](/docs/sdk-react-native/types/interfaces/IComponentConfig)[]
Defined in: [src/types.ts:23](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L23)
***
### skinSelector
> **skinSelector**: [`ISkinSelectorConfig`](/docs/sdk-react-native/types/interfaces/ISkinSelectorConfig)
Defined in: [src/types.ts:20](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L20)
---
# Interface: IExperience
Source: /docs/sdk-react-native/types/interfaces/IExperience
Defined in: [src/types.ts:8](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L8)
## Indexable
\[`key`: `string`\]: `any`
---
# Interface: ISkinSelectorConfig
Source: /docs/sdk-react-native/types/interfaces/ISkinSelectorConfig
Defined in: [src/types.ts:4](https://github.com/hadarge/myop/blob/main/myop-react-native-host/src/types.ts#L4)
## Indexable
\[`key`: `string`\]: `any`
---
# @myop/vue
Source: /docs/sdk-vue/globals
## References
### MyopContainer
Renames and re-exports [MyopComponent](/docs/sdk-vue/variables/MyopComponent)
***
### MyopFallback
Renames and re-exports [MyopComponent](/docs/sdk-vue/variables/MyopComponent)
***
### MyopLoader
Renames and re-exports [MyopComponent](/docs/sdk-vue/variables/MyopComponent)
## Interfaces
- [IComponentInstanceConfig](/docs/sdk-vue/interfaces/IComponentInstanceConfig)
- [IMyopComponentProps](/docs/sdk-vue/interfaces/IMyopComponentProps)
- [SizeInfo](/docs/sdk-vue/interfaces/SizeInfo)
## Type Aliases
- [EventHandlerProps](/docs/sdk-vue/type-aliases/EventHandlerProps)
- [IPropTypes](/docs/sdk-vue/type-aliases/IPropTypes)
- [ITypedMyopComponent](/docs/sdk-vue/type-aliases/ITypedMyopComponent)
- [KebabToPascal](/docs/sdk-vue/type-aliases/KebabToPascal)
## Variables
- [MyopComponent](/docs/sdk-vue/variables/MyopComponent)
---
# @myop/vue
Source: /docs/sdk-vue
Official Vue bindings for embedding [Myop](https://myop.dev) components in your Vue applications.
Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.
[](https://www.npmjs.com/package/@myop/vue)
[](https://opensource.org/licenses/MIT)
[](https://myop.dev/discord)
[Website](https://www.myop.dev/) | [Documentation](https://docs.myop.dev/) | [Dashboard](https://dashboard.myop.dev/) | [Discord](https://myop.dev/discord)
## Installation
```bash
npm install @myop/vue
```
```bash
yarn add @myop/vue
```
```bash
pnpm add @myop/vue
```
## Auto-Generated Vue Components
Myop automatically generates a typed Vue component package for every component you create in the [dashboard](https://dashboard.myop.dev/). Install it directly via npm:
```bash
npm install https://cloud.myop.dev/npm/{component-id}/vue
```
Then import and use it like any Vue component. For example, if you created a table component called "users-table" in the dashboard:
```vue
```
**Why this is powerful:**
- **Fully typed** — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
- **Auto loaded** — Components are fetched and rendered automatically, no manual setup required
- **Not in your code** — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
- **Zero bundle impact** — The entire `@myop/vue` package costs only ~6KB gzipped—and that's the total cost whether you use 1, 2, or 1,000 components. Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding a single byte to your application bundle. Consider typical bundle costs: a chart library (~60KB), a map component (~200KB), a data grid (~150KB), a rich text editor (~100KB), or a chat widget with emoji picker (~80KB). With Myop, all of these cost ~0KB to your bundle—they load on-demand when needed
**Environment options:**
Set the default environment for all components using `setEnvironment`:
```ts
import { setEnvironment } from "@myop/vue";
// Set default environment for all component loads
setEnvironment("staging");
```
You can also override the environment directly on a specific component:
```vue
```
Environments are fully configurable in the [dashboard](https://dashboard.myop.dev/), allowing you to test changes in staging before publishing to production.
For more details on auto-generated packages, see the [Auto-Generated Packages documentation](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages).
## Requirements
- Vue 3.0+
## Quick Start
```vue
```
## Components
### `MyopComponent`
The main component for embedding Myop components.
```vue
```
#### Props
| Prop | Type | Description |
|------|------|-------------|
| `componentId` | `string` | The ID of the Myop component to load |
| `data` | `object` | Data to pass to the component via `myop_init_interface` |
| `style` | `object` | CSS styles for the container |
| `#loader` | `slot` | Loading indicator slot (default: no loader). Use `` for default Myop loader |
| `#fallback` | `slot` | Error fallback slot (default: ``). Override with custom component |
| `fadeDuration` | `number` | Loader fade-out duration in ms (default: `200`) |
| `environment` | `string` | Load from a specific environment (e.g., `"staging"`, `"prod"`) |
| `preview` | `boolean` | Load the unpublished preview version of the component |
#### Events
| Event | Payload | Description |
|-------|---------|-------------|
| `@action` | `(action, payload)` | Generic handler for all CTA events |
| `@[action-name]` | `payload` | Handler for specific actions (e.g., `@row-clicked`) |
| `@load` | `component` | Called when the component finishes loading |
| `@error` | `error: string` | Called when loading fails |
#### Environments & Preview
Myop supports multiple environments, allowing you to test changes before going live:
```vue
```
Environments are configured in the [dashboard](https://dashboard.myop.dev/). Use `:preview="true"` to test unpublished changes before making them live.
### `MyopContainer` (Legacy)
The legacy container component. Use `MyopComponent` for new projects.
```vue
```
## Type-Safe Event Handlers
Define your CTA payloads for fully typed event handlers:
```vue
```
## Configuration
### Preloading Components
Preload components for faster rendering:
```ts
import { preloadComponents, isPreloaded } from "@myop/vue";
// Preload multiple components
await preloadComponents(["component-1", "component-2"]);
// Check if a component is preloaded
if (isPreloaded("component-1")) {
console.log("Component is cached and ready");
}
```
### Custom Repository URL
```ts
import { setCloudRepositoryUrl } from "@myop/vue";
// Point to a custom Myop server
setCloudRepositoryUrl("https://your-custom-server.com");
```
### Environment Configuration
```ts
import { setEnvironment } from "@myop/vue";
// Set default environment for all component loads
setEnvironment("staging");
```
### Local Development
```ts
import { enableLocalDev } from "@myop/vue";
// Connect to local Myop development server (localhost:9292)
enableLocalDev();
```
### Advanced: Custom Repository
```ts
import { setCloudRepository, getCloudRepository } from "@myop/vue";
import { CloudRepository } from "@myop/sdk/helpers";
// Set a custom CloudRepository instance
const customRepo = new CloudRepository("https://custom-url.com");
setCloudRepository(customRepo);
// Get the current repository
const repo = getCloudRepository();
```
## Loading & Error States
By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.
### Using the Default Myop Loader
```vue
```
### Custom Loading State
```vue
Loading component...
```
### Custom Error Fallback
```vue
Failed to load component
```
## API Reference
### Exports
| Export | Description |
|--------|-------------|
| `MyopComponent` | Main component for embedding Myop components |
| `MyopLoader` | Default Myop-branded loading indicator (opt-in) |
| `MyopFallback` | Default Myop-branded error fallback |
| `preloadComponents` | Preload components for faster rendering |
| `isPreloaded` | Check if a component is cached |
| `enableLocalDev` | Enable local development mode |
| `setCloudRepositoryUrl` | Set custom server URL |
| `setCloudRepository` | Set custom CloudRepository instance |
| `getCloudRepository` | Get current CloudRepository instance |
| `setEnvironment` | Set default environment |
## License
MIT
---
# Interface: IComponentInstanceConfig
Source: /docs/sdk-vue/interfaces/IComponentInstanceConfig
Defined in: [types.ts:5](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L5)
## Indexable
\[`key`: `string`\]: `any`
## Properties
### componentId
> **componentId**: `string`
Defined in: [types.ts:7](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L7)
***
### componentName
> **componentName**: `string`
Defined in: [types.ts:8](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L8)
***
### id
> **id**: `string`
Defined in: [types.ts:6](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L6)
***
### nestedComponents?
> `optional` **nestedComponents**: [`IComponentInstanceConfig`](/docs/sdk-vue/interfaces/IComponentInstanceConfig)[]
Defined in: [types.ts:10](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L10)
***
### resolvedExperiences?
> `optional` **resolvedExperiences**: `object`[]
Defined in: [types.ts:11](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L11)
#### Index Signature
\[`key`: `string`\]: `any`
***
### resolvedNestedComponents?
> `optional` **resolvedNestedComponents**: `object`[]
Defined in: [types.ts:12](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L12)
#### Index Signature
\[`key`: `string`\]: `any`
***
### skinSelector
> **skinSelector**: `object`
Defined in: [types.ts:9](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L9)
#### Index Signature
\[`key`: `string`\]: `any`
---
# Interface: IMyopComponentProps\
Source: /docs/sdk-vue/interfaces/IMyopComponentProps
Defined in: [types.ts:57](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L57)
Typed props interface for accessing component.props with autocomplete.
Contains myop_init_interface and myop_cta_handler with proper types.
## Type Parameters
• **TDataType** = `any`
• **TPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>
## Properties
### myop\_cta\_handler()?
> `optional` **myop\_cta\_handler**: \<`K`\>(`action`, `payload`) => `void`
Defined in: [types.ts:64](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L64)
Handle CTA events from the component
#### Type Parameters
• **K** *extends* `string` \| `number` \| `symbol`
#### Parameters
##### action
`K`
##### payload
`TPayloads`\[`K`\]
#### Returns
`void`
***
### myop\_init\_interface()?
> `optional` **myop\_init\_interface**: (`data`) => `void`
Defined in: [types.ts:62](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L62)
Initialize the component with data
#### Parameters
##### data
`TDataType`
#### Returns
`void`
---
# Interface: SizeInfo
Source: /docs/sdk-vue/interfaces/SizeInfo
Defined in: [types.ts:16](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L16)
## Properties
### autoSizingHeight
> **autoSizingHeight**: `boolean`
Defined in: [types.ts:20](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L20)
***
### autoSizingWidth
> **autoSizingWidth**: `boolean`
Defined in: [types.ts:19](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L19)
***
### height
> **height**: `number`
Defined in: [types.ts:18](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L18)
***
### width
> **width**: `number`
Defined in: [types.ts:17](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L17)
---
# Type Alias: EventHandlerProps\
Source: /docs/sdk-vue/type-aliases/EventHandlerProps
> **EventHandlerProps**\<`TPayloads`\>: `string` *extends* keyof `TPayloads` ? `object` : `` { [K in keyof TPayloads as `on${KebabToPascal}`]?: (payload: TPayloads[K]) => void } ``
Defined in: [types.ts:36](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L36)
Generates typed event handler props from CTA payloads.
e.g., `{ 'row-clicked': { rowIndex: number } }` -> `{ onRowClicked?: (payload: { rowIndex: number }) => void }`
## Type Parameters
• **TPayloads** *extends* `Record`\<`string`, `any`\>
---
# Type Alias: IPropTypes\
Source: /docs/sdk-vue/type-aliases/IPropTypes
> **IPropTypes**\<`TDataType`, `TPayloads`\>: `IBaseProps`\<`TDataType`, `TPayloads`\> & [`EventHandlerProps`](/docs/sdk-vue/type-aliases/EventHandlerProps)\<`TPayloads`\>
Defined in: [types.ts:106](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L106)
Full props type including generated event handlers.
Supports both generic `on` callback and individual typed handlers like `onRowClicked`.
## Type Parameters
• **TDataType** = `any`
• **TPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>
---
# Type Alias: ITypedMyopComponent\
Source: /docs/sdk-vue/type-aliases/ITypedMyopComponent
> **ITypedMyopComponent**\<`TDataType`, `TPayloads`\>: `Omit`\<`IMyopComponent`, `"props"`\> & `object`
Defined in: [types.ts:71](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L71)
Typed Myop component interface with typed props.
Use this type for the component returned in load event.
## Type declaration
### props
> **props**: [`IMyopComponentProps`](/docs/sdk-vue/interfaces/IMyopComponentProps)\<`TDataType`, `TPayloads`\> \| `null`
Typed props for the component
## Type Parameters
• **TDataType** = `any`
• **TPayloads** *extends* `Record`\<`string`, `any`\> = `Record`\<`string`, `any`\>
---
# Type Alias: KebabToPascal\
Source: /docs/sdk-vue/type-aliases/KebabToPascal
> **KebabToPascal**\<`S`\>: `S` *extends* `` `${infer First}-${infer Rest}` `` ? `` `${Capitalize}${KebabToPascal}` `` : `Capitalize`\<`S`\>
Defined in: [types.ts:27](https://github.com/hadarge/myop/blob/main/myop-vue-host/src/types.ts#L27)
Converts kebab-case string to PascalCase
e.g., 'column-reordered' -> 'ColumnReordered'
## Type Parameters
• **S** *extends* `string`
---
# Variable: MyopComponent
Source: /docs/sdk-vue/variables/MyopComponent
> **MyopComponent**: `any`
---
# @myop/angular
Source: /docs/sdk-angular
Official Angular bindings for embedding [Myop](https://myop.dev) components in your Angular applications.
Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.
[](https://www.npmjs.com/package/@myop/angular)
[](https://opensource.org/licenses/MIT)
[](https://myop.dev/discord)
[Website](https://www.myop.dev/) | [Documentation](https://docs.myop.dev/) | [Dashboard](https://dashboard.myop.dev/) | [Discord](https://myop.dev/discord)
## Installation
```bash
npm install @myop/angular
```
```bash
yarn add @myop/angular
```
```bash
pnpm add @myop/angular
```
## Auto-Generated Angular Components
Myop automatically generates a typed Angular component package for every component you create in the [dashboard](https://dashboard.myop.dev/). Install it directly via npm:
```bash
npm install https://cloud.myop.dev/npm/{component-id}/angular
```
### Setup (One-Time Configuration)
Add `node_modules/@myop` to your TypeScript compilation in `tsconfig.app.json`:
```json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app"
},
"include": [
"src/**/*.d.ts",
"src/**/*.ts",
"node_modules/@myop/**/*.ts"
]
}
```
This allows Angular to compile the auto-generated component packages alongside your application code.
### Usage
Import and use the generated component directly. For example, if you created a table component called "users-table" in the dashboard:
```typescript
import { Component } from "@angular/core";
import { UsersTableComponent, UsersTableCtaPayloads, CtaEvent } from "@myop/users-table";
@Component({
selector: "app-root",
standalone: true,
imports: [UsersTableComponent],
template: `
`,
})
export class AppComponent {
users = [
{ id: 1, name: "Alice", email: "alice@example.com", role: "Admin" },
{ id: 2, name: "Bob", email: "bob@example.com", role: "User" },
{ id: 3, name: "Charlie", email: "charlie@example.com", role: "User" },
];
onCta(event: CtaEvent) {
switch (event.action) {
case "rowClicked":
console.log("Selected user:", event.payload.rowData);
break;
case "deleteClicked":
this.deleteUser(event.payload.userId);
break;
case "exportRequested":
this.exportToFormat(event.payload.format);
break;
}
}
}
```
**Why this is powerful:**
- **Fully typed** — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads
- **Auto loaded** — Components are fetched and rendered automatically, no manual setup required
- **Not in your code** — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy
- **Zero bundle impact** — The entire `@myop/angular` package costs only ~6KB gzipped—and that's the total cost whether you use 1, 2, or 1,000 components. Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding a single byte to your application bundle. Consider typical bundle costs: a chart library (~60KB), a map component (~200KB), a data grid (~150KB), a rich text editor (~100KB), or a chat widget with emoji picker (~80KB). With Myop, all of these cost ~0KB to your bundle—they load on-demand when needed
**Environment options:**
Set the default environment for all components using `setEnvironment`:
```typescript
import { setEnvironment } from "@myop/angular";
// Set default environment for all component loads
setEnvironment("staging");
```
You can also override the environment directly on a specific component:
```html
```
Environments are fully configurable in the [dashboard](https://dashboard.myop.dev/), allowing you to test changes in staging before publishing to production.
For more details on auto-generated packages, see the [Auto-Generated Packages documentation](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages).
## Requirements
- Angular 17.0+
## Quick Start
```typescript
import { Component } from "@angular/core";
import { MyopComponent } from "@myop/angular";
@Component({
selector: "app-root",
standalone: true,
imports: [MyopComponent],
template: `
`,
})
export class AppComponent {
onAction(event: { action: string; payload: any }) {
console.log("Action:", event.action, "Payload:", event.payload);
}
}
```
## Components
### `myop-component`
The main component for embedding Myop components.
```typescript
import { Component } from "@angular/core";
import { MyopComponent } from "@myop/angular";
@Component({
selector: "app-dashboard",
standalone: true,
imports: [MyopComponent],
template: `
`,
})
export class DashboardComponent {
items = [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
];
onRowClicked(payload: any) {
console.log("Row clicked:", payload);
}
onLoad(component: any) {
console.log("Loaded!", component);
}
onError(error: string) {
console.error("Error:", error);
}
}
```
#### Inputs
| Input | Type | Description |
|-------|------|-------------|
| `componentId` | `string` | The ID of the Myop component to load |
| `data` | `object` | Data to pass to the component via `myop_init_interface` |
| `style` | `object` | CSS styles for the container |
| `fadeDuration` | `number` | Loader fade-out duration in ms (default: `200`) |
| `environment` | `string` | Load from a specific environment (e.g., `"staging"`, `"prod"`) |
| `preview` | `boolean` | Load the unpublished preview version of the component |
#### Outputs
| Output | Type | Description |
|--------|------|-------------|
| `(action)` | `EventEmitter<{action, payload}>` | Generic handler for all CTA events |
| `([actionName])` | `EventEmitter` | Handler for specific actions (e.g., `(rowClicked)`) |
| `(load)` | `EventEmitter` | Called when the component finishes loading |
| `(error)` | `EventEmitter` | Called when loading fails |
#### Inputs for Loading/Fallback
| Input | Type | Description |
|-------|------|-------------|
| `loader` | `TemplateRef` | Loading indicator template (default: `null` - no loader). Use `MyopLoader` for default Myop loader |
| `fallback` | `TemplateRef` | Error fallback template (default: built-in `MyopFallback`). Override with custom template |
#### Environments & Preview
Myop supports multiple environments, allowing you to test changes before going live:
```html
```
Environments are configured in the [dashboard](https://dashboard.myop.dev/). Use `[preview]="true"` to test unpublished changes before making them live.
### `myop-container` (Legacy)
The legacy container component. Use `myop-component` for new projects.
```typescript
import { Component } from "@angular/core";
import { MyopContainerComponent } from "@myop/angular";
@Component({
selector: "app-root",
standalone: true,
imports: [MyopContainerComponent],
template: `
`,
})
export class AppComponent {
onReady(component: any) {
console.log("Ready!", component);
}
}
```
## Type-Safe Event Handlers
Define your CTA payloads for fully typed event handlers:
```typescript
import { Component } from "@angular/core";
import { MyopComponent } from "@myop/angular";
// Define your component's data and CTA payload types
interface MyData {
items: { id: string; name: string }[];
}
interface RowClickedPayload {
rowIndex: number;
rowData: any;
}
interface ItemSelectedPayload {
itemId: string;
}
interface ExportRequestedPayload {
format: "csv" | "json";
}
@Component({
selector: "app-dashboard",
standalone: true,
imports: [MyopComponent],
template: `
`,
})
export class DashboardComponent {
data: MyData = {
items: [
{ id: "1", name: "Item 1" },
{ id: "2", name: "Item 2" },
],
};
onRowClicked(payload: RowClickedPayload) {
console.log("Row clicked:", payload.rowIndex);
}
onItemSelected(payload: ItemSelectedPayload) {
console.log("Item selected:", payload.itemId);
}
onAction(event: { action: string; payload: any }) {
console.log(event.action, event.payload);
}
}
```
## Configuration
### Preloading Components
Preload components for faster rendering:
```typescript
import { preloadComponents, isPreloaded } from "@myop/angular";
// Preload multiple components
await preloadComponents(["component-1", "component-2"]);
// Check if a component is preloaded
if (isPreloaded("component-1")) {
console.log("Component is cached and ready");
}
```
### Custom Repository URL
```typescript
import { setCloudRepositoryUrl } from "@myop/angular";
// Point to a custom Myop server
setCloudRepositoryUrl("https://your-custom-server.com");
```
### Environment Configuration
```typescript
import { setEnvironment } from "@myop/angular";
// Set default environment for all component loads
setEnvironment("staging");
```
### Local Development
```typescript
import { enableLocalDev } from "@myop/angular";
// Connect to local Myop development server (localhost:9292)
enableLocalDev();
```
### Advanced: Custom Repository
```typescript
import { setCloudRepository, getCloudRepository } from "@myop/angular";
import { CloudRepository } from "@myop/sdk/helpers";
// Set a custom CloudRepository instance
const customRepo = new CloudRepository("https://custom-url.com");
setCloudRepository(customRepo);
// Get the current repository
const repo = getCloudRepository();
```
## Loading & Error States
By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.
### Using the Default Myop Loader
```typescript
import { Component } from "@angular/core";
import { MyopComponent, MyopLoader } from "@myop/angular";
@Component({
selector: "app-example",
standalone: true,
imports: [MyopComponent, MyopLoader],
template: `
`,
})
export class ExampleComponent {}
```
### Custom Loading State
```typescript
@Component({
selector: "app-example",
standalone: true,
imports: [MyopComponent],
template: `
