svelte-portal - GitLite

KO | EN

gitlite — search

#ai #llm #go #machine-learning #deep-learning #linux #nodejs #java #awesome #cli #vue #security #ios #open-source

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

# Installation Guide

1. Get the code

git clone https://github.com/romkor/svelte-portal

Downloads the entire project code from GitHub to your computer.

cd svelte-portal

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install --save svelte-portal

Downloads and installs the libraries listed in package.json.

yarn add svelte-portal

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// 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.