Interface DepthMarkerProps

Example

const MyElbow = <svg preserveAspectRatio="none" viewBox="0 0 1 1" style={{width: "1em", height: "100%"}}><path d={"M 0.5,0 L 0.5,0.5 L 1.0,0.5"} vectorEffect={"non-scaling-stroke"} stroke={"currentColor"} strokeWidth={"1px"} /></svg>
const MyTee = <svg preserveAspectRatio="none" viewBox="0 0 1 1" style={{width: "1em", height: "100%"}}><path d={"M 0.5,0 L 0.5,1.0 M 0.5,0.5 L 1.0,0.5"} vectorEffect={"non-scaling-stroke"} stroke={"currentColor"} strokeWidth={"1px"} /></svg>
const MyPipe = <svg preserveAspectRatio="none" viewBox="0 0 1 1" style={{width: "1em", height: "100%"}}><path d={"M 0.5,0 L 0.5,1.0"} vectorEffect={"non-scaling-stroke"} stroke={"currentColor"} strokeWidth={"1px"} /></svg>
const MySpacer = <svg preserveAspectRatio="none" viewBox="0 0 1 1" style={{width: "1em", height: "100%"}}><path d={""} vectorEffect={"non-scaling-stroke"} stroke={"currentColor"} strokeWidth={"1px"} /></svg>

const MyNodeRenderer: TreeNodeComponent<any> = (props) => {
 return (<div>
     <DepthMarker nodeKey={props.nodeKey} tee={MyTee} elbow={MyElbow} pipe={MyPipe} spacer={MySpacer} />
     <span>{props.value.name}</span>
 </div>)
}
interface DepthMarkerProps {
    elbow?: ReactNode;
    nodeKey: string;
    pipe?: ReactNode;
    skipFirst?: boolean;
    spacer?: ReactNode;
    tee?: ReactNode;
}

Properties

elbow? nodeKey pipe? skipFirst? spacer? tee?

Properties

Optional elbow

elbow?: ReactNode

The component used as an Elbow: the tree-shape part when this node is the last descendent of it's parent node.

nodeKey

nodeKey: string

the node key that the current tree-shape is used for

Optional pipe

pipe?: ReactNode

The component used as a Pipe; the tree-shape part when some ancestor of this node has siblings below it

Optional skipFirst

skipFirst?: boolean

skips the first item - use this if you don't want a stray pipe or elbow on your root.

Optional spacer

spacer?: ReactNode

The component used as a spacer in the tree

Optional tee

tee?: ReactNode

The component used as a Tee; the tree-shape part next to the node and the node has additional siblings below it.

Settings

Member Visibility

Theme

On This Page