useItemSize

Returns the size of the widget on the dashboard. Useful for widgets that draw with absolute sizes, like SVG charts.

function useItemSize(): ItemSize

Returns

The ItemSize of the widget, in pixels.

Example

src/widgets/example/Example.tsx

import React from 'react'
import {useItemSize} from '@modbros/dashboard-sdk'

export default function Example() {
  const {width, height} = useItemSize()
  const radius = Math.min(width, height) / 2

  return (
    <svg width={width} height={height}>
      <circle cx={width / 2} cy={height / 2} r={radius} fill="currentColor"/>
    </svg>
  )
}