---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://divkit.tech/docs/en/concepts/extensions/size-provider.md
  - https://divkit.tech/docs/ru/concepts/extensions/size-provider.md
  - href: https://divkit.tech/docs/en/concepts/extensions/size-provider.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/en/llms.txt?revision=r22102947
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt?revision=r22102947

# Element size in variables

The `size_provider` extension writes the width and height of the element to [variables](https://divkit.tech/docs/en/concepts/variables.md) after its size is calculated.

{% note warning %}

The preferred way to get the element size is the [layout_provider](https://divkit.tech/docs/en/concepts/layout.md#layout-provider) property. It accepts the same parameters and doesn't require connecting an extension. On Android and iOS, the `size_provider` extension handler is marked as deprecated.

{% endnote %}

{% cut "Example" %}

```json translate=no
{
  "type": "container",
  "items": [
    {
      "type": "text",
      "text": "Hello!",
      "width": {
        "type": "wrap_content"
      },
      "extensions": [
        {
          "id": "size_provider",
          "params": {
            "width_variable_name": "title_width"
          }
        }
      ]
    },
    {
      "type": "separator",
      "width": {
        "type": "fixed",
        "value": "@{title_width}"
      }
    }
  ]
}
```

In this example, the separator width is equal to the text width. The `title_width` integer variable must be declared in the card.

{% endcut %}

## Parameters {#params}

#|
||
**Parameters**
|
**Description**
||

||
`id`
|
Extension ID.
||

||
`width_variable_name`
|
Name of the variable that the element width in dp is written to. Optional parameter.
||

||
`height_variable_name`
|
Name of the variable that the element height in dp is written to. Optional parameter.
||
|#

Specify at least one of the parameters. The variables must be declared with the `integer` type.

## Connection {#connect}

{% list tabs %}

- Android

  build.gradle

  ```groovy translate=no
  dependencies {
      implementation "com.yandex.div:div-size-provider:${versions.divkit}"
  }
  ```

  In the code:

  ```kotlin translate=no
  val divConfiguration = DivConfiguration.Builder(imageLoader)
      .extension(DivSizeProviderExtensionHandler())
      .build()
  ```

- iOS

  The `SizeProviderExtensionHandler` handler is available only when the module is imported with the `@_spi(Legacy)` attribute:

  ```swift translate=no
  @_spi(Legacy) import DivKitExtensions

  DivKitComponents(
    ...
    extensionHandlers: [
      SizeProviderExtensionHandler(variablesStorage: variablesStorage)
    ]
  )
  ```

- Web

  ```js translate=no
  import { SizeProvider } from '@divkitframework/divkit/client';

  const map = new Map();

  map.set('size_provider', SizeProvider);

  render({
      id: 'test',
      target: element,
      json: {},
      extensions: map
  });
  ```

{% endlist %}

<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->