useStencil()

function useStencil(): StencilApi;

Drives the nearest Stencil palette. Returns its ui.Stencil view plus startCellDrag / cancelCellDrag, so you can start a drag from your own palette item and drop a new shape onto the paper. Throws when used outside a <Stencil>.

Returns

The StencilApi: the underlying ui.Stencil view (stencil) plus imperative drag methods (startCellDrag, cancelCellDrag).

cancelCellDrag

readonly cancelCellDrag: (options?) => void;

Cancels the active drag (if any). The clone returns to the stencil.

Parameters

Parameter	Type	Description
options?	{ dropAnimation?: DropAnimation; }	Optional override for the drop animation.
options.dropAnimation?	DropAnimation	Override the drop animation used when the clone returns to the stencil.

Returns

void

---

startCellDrag

readonly startCellDrag: (cell, event, options?) => void;

Programmatically starts dragging a cell or plain CellRecord from the stencil.

Parameters

Parameter	Type	Description
cell	| Cell<Attributes<Selectors>, ModelSetOptions> | AnyCellRecord	A dia.Cell instance or a plain CellRecord object: used as the drag preview.
event	| Event | MouseEvent<Element, MouseEvent> | TouchEvent<Element>	The originating mouse/touch event.
options?	StartCellDragOptions	Optional per-drag overrides.

Returns

void

---

stencil

readonly stencil: StencilView;

The underlying JointJS ui.Stencil view (joint-react-plus's StencilView subclass).

See

Stencil

Throws

When used outside a Stencil component.

Examples

Start a drag from a palette item

import { useStencil } from '@joint/react-plus';

function PaletteItem() {
  const { startCellDrag } = useStencil();
  return (
    <button
      onPointerDown={(event) =>
        startCellDrag({ type: 'element', data: { label: 'Task' } }, event)
      }
    >
      Add task
    </button>
  );
}

Filter the palette

import { useStencil } from '@joint/react-plus';

function SearchBox() {
  const { stencil } = useStencil();
  return <input onChange={(event) => stencil.filter(event.target.value)} />;
}