Skip to main content

Layers

A Photoshop-like layers panel for your page editor.

Usage

yarn add @craftjs/layers
import React from "react";
import {Editor} from "@craftjs/core"
import {Layers} from "@craftjs/layers"

export default function App() {
return (
<div style={{margin: "0 auto", width: "800px"}}>
<Typography variant="h5" align="center">A super simple page editor</Typography>
<Editor resolver={...}>
<Layers />
</Editor>
</div>
);
}

Types

Layer

Properties

  • idNodeId
    A randomly generated unique id
  • depthnumber
    A depth of the current Layer
  • expandedboolean
    Returns true if the Layer is expanded
  • eventsObject
    • selectedboolean
      Is true if the layer is clicked
    • hoveredboolean
      Is true if the layer is being hovered
  • domHTMLElement
    The DOM of the current layer including its header and children. This is defined by the `connectLayer` connector
  • headingDomHTMLElement
    The DOM of the current Layer's heading. This is defined by the `connectLayerHeader` connector

Reference

<Layers />

Props

  • expandRootOnLoad?boolean
    Optional. If enabled, the Root Node will be expanded by default
  • renderLayer?React.ReactElement
    Optional. Specify the component to render each layer

useLayer

Parameters

  • collector(layer: Layer) => Collected
    A function that collects relevant state information from the corresponding `Layer`. The component will re-render when the values returned by this function changes.

Returns

  • Object
    • connectorsObject
      • drag(dom: HTMLElement, nodeId: String) => HTMLElement
        Specifies the DOM that should be draggable
      • layer(dom: HTMLElement, nodeId: String) => HTMLElement
        Specifies the DOM that represents the entire Layer
      • layerHeading(dom: HTMLElement, nodeId: String) => HTMLElement
        Specifies the DOM that represents the layer's heading
    • actionsObject
      • toggleLayer() => void
        Toggle the corresponding Layer's expanded state

Default components

The following components are available for you to extend if you wish to design your own component to render the layers (which can be specified in the renderLayer prop).

  • <DefaultLayer />
    • <DefaultLayerHeader />
      • <EditableLayerName> This component enables the end user to edit the layer names. The values are saved into the respective Node's custom.displayName prop.

const Layer = () => {
return (
<div>
<DefaultLayerHeader />
</div>
)
}

const App = () => {
return (
<Editor>
<Frame>
...
</Frame>
<Layers
renderLayer={Layer}
/>
</Editor>
)
}