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

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 <Portal /> will be rendered outside of its tree hierarchy.

Example

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 (
      <Stage width={400} height={400}>
        <Layer id="example-layer">
          <Portal>
            <Text text="This content will be rendered in a Portal (above overlay-layer)." width={400} height={400} />
          </Portal>
        </Layer>
        <Layer id="overlay-layer">
          <Rect fill="#c1f7ff" width={400} height={400} />
        </Layer>
      </Stage>
    );
  }
}

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.

import React, { Component } from 'react';
import { Rect, Text } from 'react-konva';
import { Group, Stage, Portal, Layer } from 'react-konva-portal';
 
function Content({ text }) {
  return <Text text={text} width={400} height={400} />;
}
 
class TeleportExample extends Component {
  render() {
    return (
      <Stage width={400} height={400}>
        <Layer id="content-layer">
          <Portal containerId="another-layer">
            <Content text="Will be rendered as a children of <Layer id={'another-layer'} />" />
          </Portal>
          <Portal>
            <Content text="Will be rendered as a children of default portals layer in `Stage`" />
          </Portal>
          <Portal containerId="some-group" zIndex={100}>
            <Content text="Will be rendered as a children of <Group id={'some-group'} /> with specified stacking order" />
          </Portal>
          <Portal containerId="some-group">
            <Content text="Will be rendered as a children of <Group id={'some-group'} />" />
          </Portal>
        </Layer>
        <Layer id="another-layer">
          <Group id="some-group" />
        </Layer>
      </Stage>
    );
  }
}

---

API

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

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

Stage

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.

Portal

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.

Layer

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.

Group

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