import { VeltArrows, VeltArrowTool, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {

  const { client } = useVeltClient();

  useEffect(()=>{
    if(client){
      const arrowElement = client.getArrowElement();
      arrowElement.allowedElementIds(['ALLOWED_ID_1', 'ALLOWED_ID_2']);
      arrowElement.enableDarkMode();
      arrowElement.disableDarkMode();
    }
  })

  return (
    <div>
      <VeltArrows 
        allowedElementIds={['ALLOWED_ID_1', 'ALLOWED_ID_2']}
        darkMode={true}
      />
      <VeltArrowTool/>
    </div>
  )
}
1

Getting the Arrow Element

To get access to the Arrow Element APIs, you will first need to get the Arrow Element object from the client.

const arrowElement = client.getArrowElement();
2

Set which elements Arrows can be added to

You can use the allowedElementIds() property to set an allowed list of elements the Arrows feature can be added to.

<VeltArrows allowedElementIds={['ALLOWED_ID_1', 'ALLOWED_ID_2']} />

API Methods:

You can use the arrowElement.allowedElementIds() method to set an allowed list of elements the Arrows feature can be added to.

arrowElement.allowedElementIds(['ALLOWED_ID_1', 'ALLOWED_ID_2']);
3

Dark Mode

Whether dark mode is enabled.

Default: false

<VeltArrows darkMode={true} />

import { VeltArrows, VeltArrowTool, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {

  const { client } = useVeltClient();

  useEffect(()=>{
    if(client){
      const arrowElement = client.getArrowElement();
      arrowElement.allowedElementIds(['ALLOWED_ID_1', 'ALLOWED_ID_2']);
      arrowElement.enableDarkMode();
      arrowElement.disableDarkMode();
    }
  })

  return (
    <div>
      <VeltArrows 
        allowedElementIds={['ALLOWED_ID_1', 'ALLOWED_ID_2']}
        darkMode={true}
      />
      <VeltArrowTool/>
    </div>
  )
}