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>
  )
}