Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vrimar/mithril-portal
Mithril component for rendering inline children to document.body
https://github.com/vrimar/mithril-portal
mithril portal
Last synced: about 2 months ago
JSON representation
Mithril component for rendering inline children to document.body
- Host: GitHub
- URL: https://github.com/vrimar/mithril-portal
- Owner: vrimar
- Created: 2017-03-30T00:25:21.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-04T15:22:03.000Z (11 months ago)
- Last Synced: 2024-09-19T23:38:09.916Z (3 months ago)
- Topics: mithril, portal
- Language: TypeScript
- Homepage:
- Size: 213 KB
- Stars: 16
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-mithril - mithril-portal - a component for rendering inline children to `document.body` (Uncategorized / Uncategorized)
README
# Mithril-Portal
Mithril component for rendering children outside the DOM hierarchy of the parent component.
## Why
Mithril-portal mounts a component/children to a `div` that is appended to `document.body`. This is useful for UI related components such as modals, popovers, dropdowns, etc. where rendering inline would cause css overflow/z-index issues.
## Installation
```
npm install --save mithril-portal
```## Usage
```javascript
import m from 'mithril';
import Portal from 'mithril-portal';const Page = {
view() {
return m('', [
m(Portal, m('h1', 'Children'))
])
}
}
```## API
| Attribute | Description |
|----------------------------- |------------------------------------------------------------------------------------------- |
| onContentMount(rootElement: HTMLElement) => void | Callback invoked when the portal has mounted. |
| container: HTMLElement | Optional element to mount to (default is `document.body`) |