1# Component Size Change Event
2
3The size change event is triggered whenever the component's size changes.
4
5>  **NOTE**
6>
7>  This feature is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9## onSizeChange
10
11onSizeChange(event: SizeChangeCallback): T
12
13Triggered when the component size changes due to layout updates. This event is not triggered for render attribute changes caused by re-rendering, such as changes of **translate** and **offset**.
14
15**Widget capability**: This API can be used in ArkTS widgets since API version 12.
16
17**Atomic service API**: This API can be used in atomic services since API version 12.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**Parameters**
22
23| Name  | Type                     | Mandatory| Description                                                        |
24| -------- | ------------------------- | ---- | ------------------------------------------------------------ |
25| event | [SizeChangeCallback](#sizechangecallback) | Yes  | Size of the component before and after the change.|
26
27**Return value**
28
29| Type| Description|
30| -------- | -------- |
31| T | Current component.|
32
33## SizeChangeCallback
34
35SizeChangeCallback = (oldValue: SizeOptions, newValue: SizeOptions) => void
36
37Invoked when the component size changes.
38
39**Widget capability**: This API can be used in ArkTS widgets since API version 12.
40
41**Atomic service API**: This API can be used in atomic services since API version 12.
42
43**System capability**: SystemCapability.ArkUI.ArkUI.Full
44
45**Parameters**
46
47| Name  | Type                     | Mandatory| Description                                                        |
48| -------- | ------------------------- | ---- | ------------------------------------------------------------ |
49| oldValue | [SizeOptions](ts-types.md#sizeoptions) | Yes  | Width and height of the component before the change.|
50| newValue | [SizeOptions](ts-types.md#sizeoptions) | Yes  | Width and height of the component after the change.|
51
52
53## Example
54
55```ts
56// xxx.ets
57@Entry
58@Component
59struct AreaExample {
60  @State value: string = 'Text'
61  @State sizeValue: string = ''
62
63  build() {
64    Column() {
65      Text(this.value)
66        .backgroundColor(Color.Green)
67        .margin(30)
68        .fontSize(20)
69        .onClick(() => {
70          this.value = this.value + 'Text'
71        })
72        .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
73          console.info(`Ace: on size change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
74          this.sizeValue = JSON.stringify(newValue)
75        })
76      Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
77    }
78    .width('100%').height('100%').margin({ top: 30 })
79  }
80}
81```
82![onSizeChange](figures/onSizeChange.gif)
83