# @krestui/svelte-portal

> `@krestui/svelte-portal` is a svelte component to implement Portal functionality.

Latest version **0.4.8** (published 2023-02-23) · SEE LICENSE in LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install @krestui/svelte-portal
pnpm add @krestui/svelte-portal
yarn add @krestui/svelte-portal
bun add @krestui/svelte-portal
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.8 |
| Published | 2023-02-23 |
| First published | 2022-11-30 |
| Weekly downloads | 0 |
| License | SEE LICENSE in LICENSE.md |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | KrestUI |
| Maintainers | hellokarthik |
| Keywords | svelte, sveltekit, portal |

## Links

- npm: https://www.npmjs.com/package/@krestui/svelte-portal
- Repository: https://github.com/krestui/krestui
- Homepage: https://github.com/krestui/krestui#readme
- Issues: https://github.com/krestui/krestui/issues
- npm.io page: https://npm.io/package/@krestui/svelte-portal

## Dependencies (2)

- [@krestui/common-portal](https://npm.io/package/@krestui/common-portal.md) ^0.3.6
- [@krestui/common-clickoutside](https://npm.io/package/@krestui/common-clickoutside.md) ^0.3.2

## Recent versions

- 0.4.8 (latest) — 2023-02-23
- 0.4.7 — 2023-02-21
- 0.4.6 — 2023-02-21
- 0.4.4 — 2023-02-21
- 0.4.3 — 2023-02-21
- 0.4.2 — 2023-02-21
- 0.4.1 — 2022-11-30

## README

# Portal

`@krestui/svelte-portal` is a svelte component to implement Portal functionality.

## Installation

package.json

```json
  "dependencies": {
    "@krestui/svelte-portal": "^0.4.8",
  }
```

## Problem Statement

`Portal`s are used to display HTML elements that need not be necessarily in the document flow.

### Usage and Example

`Example.svelte`

```svelte
<script lang="ts">
  import Portal from '@krestui/svelte-portal/Portal.svelte';
  let isOpen = false;

  function enter() {
    isOpen = true;
  }

  function leave() {
    isOpen = false;
  }
</script>

<button type="button" on:mouseenter={enter} on:mouseleave={leave}
  >Hover over me to enable and disable portal
</button>
<Portal {isOpen}>
  <span>Some Portal Content</span>
</Portal>
```

In the example above, the Portal content appears and disappears accordingly when we hover over the button.

## Internals

By default, the `Portal` svelte component looks for a `div` by id `portals` in the current HTML `document` .

In case the `div` does not exist before, it can be created as a child at the root of the HTML `document`, right under `<body>` as - `<div id="portals" />`.

An example is illustrated below.

```html
<body>
  ...
  <div id="portals" />
</body>
```

It appends the slot as a child to the `<div id='portals'>` .

## Use Cases

Some of the popular applications include popovers, dropdowns and modals as in most of these cases they need not be in the document flow.

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