> For the complete documentation index, see [llms.txt](https://smwb-tech.gitbook.io/vue-flash-message/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smwb-tech.gitbook.io/vue-flash-message/custom-component.md).

# Custom Component

Register you component globally in you entry file (main.js or as you call it) and pass it's name in componentName property of data object. Under the hood it uses dynamic components.

**Example:**

```javascript
this.flashMessage.show({
    componentName: 'CustomComponent',
	clickable: false,
	time: 0
});
```

{% hint style="danger" %}
In case if you use combination of clickable: false and time: 0 you should provide user interface element to close message block. Use flashMessage.deleteMessage(id) method.
{% endhint %}

Your component should be able to get prop **'messageId'**

```markup
<template lang="html">
	<div class="custom-component">
		<button
			class="close-btn"
			@click="flashMessage.deleteMessage(messageId)"
		/>
		<h2>Meet vue number input</h2>
		<p>
			This is another component I'm working on,
			<a
				target="_blank"
				href="https://smwbtech.github.io/vue-number-input/"
				>vue-number-input</a
			>
		</p>
		<VueNumberInput
			v-model="value"
			class="custom-input"
			:inputClass="'custom-input-class'"
		/>
	</div>
</template>

<script>
	export default {
		props: {
			messageId: {
				type: Number,
				required: true
			}
		}
	}
</script>
```