svelte-portal - GitLite

KO | EN

gitlite — search

#javascript #python #react #golang #android #machine-learning #rust #linux #nodejs #awesome #awesome-list #security #openai #ios

svelte-portal

(★ 475)

Svelte component for rendering outside the DOM of parent component

File Explorer

Download Latest Version (.zip)

- - main.yml
  - test.yml
- dependabot.yml
- - .gitignore
  - package-lock.json
  - package.json
  - README.md
  - rollup.config.js
  - svelte.config.js
- - .gitignore
  - index.html
  - package-lock.json
  - package.json
  - README.md
  - svelte.config.js
  - tsconfig.json
  - tsconfig.node.json
  - vite.config.ts
- - .gitignore
  - package.json
  - README.md
  - webpack.config.js
- main.cjs.js
- main.es.js
- Portal.svelte
- Portal.svelte.d.ts
- Portal.test.js
- TestLifecycle.svelte
- TestPortalWrapper.svelte
.gitignore
.npmignore
.prettierignore
.prettierrc.json
.release-it.json
.tool-versions
babel.config.js
jest.config.js
LICENSE
package-lock.json
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Svelte component for rendering outside the DOM of parent component

Idea borrowed from here: https://github.com/sveltejs/svelte/issues/3088#issuecomment-505785516

# Installation

```sh
npm install --save svelte-portal
```

or

```sh
yarn add svelte-portal
```

# Usage Portal component

The `<Portal />` component has only one property: `target`

target can be a HTMLElement `target={document.body}` or a css selector `target="#modals"` that points to an already existing element.

When no target is given it defaults to: `document.body`.

## Example

```html
<script>
  import Portal from "svelte-portal";
</script>

<Portal target="body">
  <div class="toast">Entity successfully updated!</div>
</Portal>
```

# Usage portal action

The functionality can also be applied to DOM elements directly via a svelte action:

## Example

```html
<script>
  import { portal } from "svelte-portal";
</script>

<div class="toast" use:portal={"body"} hidden>Entity successfully updated!</div>
```

The `hidden` atrribute is only needed when using ssr, when portal has moved the element to it's targetted location it removes the hidden attribute.

## TypeScript support

`<script lang="ts">` users should import from `"svelte-portal/src/Portal.svelte"` instead of `"svelte-portal"` to get typing support.