@joint/react
    Preparing search index...

    Variable PaperConst

    Paper: <ElementItem extends GraphElement = GraphElement>(
        props: PaperProps<ElementItem>,
    ) => Element = ...

    Paper component that renders the JointJS paper elements inside HTML. It uses renderElement to render the elements. It must be used within a GraphProvider context.

    Type declaration

    • GraphProvider
    • PaperProps

    Props also extends dia.Paper.Options interface.

    • dia.Paper.Options

    Example with global renderElement component:

    import { createElements, InferElement, GraphProvider, Paper } from '@joint/react'

    const initialElements = createElements([ { id: '1', label: 'Node 1' , x: 100, y: 0, width: 100, height: 50 } ])
    type BaseElementWithData = InferElement<typeof initialElements>

    function RenderElement({ label }: BaseElementWithData) {
     return <HTMLElement className="node">{label}</HTMLElement>
    }
    function MyApp() {
     return <GraphProvider initialElements={initialElements}>
       <Paper renderElement={RenderElement} />
     </GraphProvider>
    }

    Example with local renderElement component:

     const initialElements = createElements([
       { id: '1', label: 'Node 1', x: 100, y: 0, width: 100, height: 50 },
     ])
     type BaseElementWithData = InferElement<typeof initialElements>

     function MyApp() {
       const renderElement: RenderElement<BaseElementWithData> = useCallback(
         (element) => <HTMLElement className="node">{element.label}</HTMLElement>,
         []
       )

       return (
         <GraphProvider initialElements={initialElements}>
           <Paper renderElement={renderElement} />
         </GraphProvider>
       )
     }

    Settings

    Member Visibility