react-konva-portal

> Portals support for react-konva

Teleport your canvas components across groups, layers and canvas elements regardless your component hierarchy. This
library provides portals support for react-konva components and may
facilitate in a complex canvas scene compositions.

Example projects link1,
link2.

Install

``bash
yarn add react-konva-portal
`

IMPORTANT: Please note, this package depends on konva and react-konva packages.

Usage

Replace react-konva root component with Stage from react-konva-portal. Please use it as a drop-in replacement of
the original one. It is required in order for portals to work.

> Any React content inside will be rendered outside of its tree hierarchy.

Example

`javascript
import React, { Component } from 'react';
import { Rect, Text, Layer } from 'react-konva';
import { Stage, Portal } from 'react-konva-portal';

class PortalExample extends Component {
render() {
return (










);
}
}
`

Optionally, You may refine desired render destination with containerId and zIndex.

> With containerId pointing to Layer/Group component from react-konva-portal
> in your app tree.
>
> You may also provide stacking order in container with zIndex property.

`javascript
import React, { Component } from 'react';
import { Rect, Text } from 'react-konva';
import { Group, Stage, Portal, Layer } from 'react-konva-portal';

function Content({ text }) {
return ;
}

class TeleportExample extends Component {
render() {
return (






" />












);
}
}
`

---

API

This package exposes Stage, Portal, Layer and Group React components.

`javascript
import { Group, Stage, Portal, Layer } from 'react-konva-portal';
`

$3

Root component for working with canvas scene composition. It accepts all Konva.Stage props and forwards the original
ref.

| Prop | Note |
| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------- |
| portalLayerProps | Optional. Accepts Konva.LayerConfig and forwards it to portals containing Layer instance from react-konva. |

$3

Special, own children teleporting component.

| Prop | Note |
| :------------ | :--------------------------------------------------------------------------------------------------------------------- |
| containerId | Optional. Accepts string value and should match id prop of Group or Layer in order for content to be rendered. |
| zIndex | Optional. Specifies stacking order in container. |
| children | Required. This property holds "travelling" content. |

$3

Container component with portals' content hosting capabilities. It accepts all Konva.Layer props and forwards the original
ref.

| Prop | Note |
| :--- | :----------------------------------------------------- |
| id | Required. Accepts string value and should be unique. |

$3

Container component with portals' content hosting capabilities. It accept all Konva.Node props and forwards the original ref.

| Prop | Note |
| :--- | :----------------------------------------------------- |
| id | Required. Accepts string` value and should be unique. |

Contribute

Use the issue tracker and/or open
pull requests.

License

MIT © papahigh