react-native-gleam 1.0.0-beta.8 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -7
- package/android/src/main/java/com/gleam/GleamView.kt +5 -3
- package/lib/module/GleamLine.js.map +1 -1
- package/lib/module/GleamViewNativeComponent.ts +10 -0
- package/lib/typescript/src/GleamLine.d.ts +3 -0
- package/lib/typescript/src/GleamLine.d.ts.map +1 -1
- package/lib/typescript/src/GleamViewNativeComponent.d.ts +10 -0
- package/lib/typescript/src/GleamViewNativeComponent.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/GleamLine.tsx +3 -0
- package/src/GleamViewNativeComponent.ts +10 -0
package/README.md
CHANGED
|
@@ -20,7 +20,7 @@ npm install react-native-gleam
|
|
|
20
20
|
|
|
21
21
|
### Bare React Native
|
|
22
22
|
|
|
23
|
-
Run `pod install` in your `ios/` directory.
|
|
23
|
+
Run `pod install` in your `ios/` directory. Android requires no additional setup — autolinking and codegen handle everything.
|
|
24
24
|
|
|
25
25
|
### Expo
|
|
26
26
|
|
|
@@ -33,6 +33,14 @@ npx expo prebuild
|
|
|
33
33
|
|
|
34
34
|
No config plugin needed — autolinking and codegen handle everything.
|
|
35
35
|
|
|
36
|
+
### Claude Code
|
|
37
|
+
|
|
38
|
+
Install the plugin to help Claude guide your first implementation — it knows every prop, pattern, and pitfall.
|
|
39
|
+
|
|
40
|
+
```sh
|
|
41
|
+
claude plugin add --from github:RamboWasReal/react-native-gleam
|
|
42
|
+
```
|
|
43
|
+
|
|
36
44
|
## Usage
|
|
37
45
|
|
|
38
46
|
```tsx
|
|
@@ -119,8 +127,8 @@ Every `GleamView` provides context to its subtree. A `GleamView.Line` always bin
|
|
|
119
127
|
| `transitionDuration` | `number` | `300` | Duration of the transition from shimmer to content (ms). `0` = instant |
|
|
120
128
|
| `transitionType` | `GleamTransition` | `Fade` | Transition style when loading ends |
|
|
121
129
|
| `intensity` | `number` | `1` | Highlight strength (0-1). Lower = more subtle shimmer |
|
|
122
|
-
| `baseColor` | `
|
|
123
|
-
| `highlightColor` | `
|
|
130
|
+
| `baseColor` | `ColorValue` | `#E0E0E0` | Background color of the shimmer |
|
|
131
|
+
| `highlightColor` | `ColorValue` | `#F5F5F5` | Color of the moving highlight |
|
|
124
132
|
| `onTransitionEnd` | `function` | — | Called when the transition completes or is interrupted. Receives `{ nativeEvent: { finished: boolean } }` — `true` if completed, `false` if interrupted (e.g., `loading` toggled back to `true`) |
|
|
125
133
|
|
|
126
134
|
All standard `View` props are also supported (`style`, `testID`, etc.). Note: the shimmer overlay supports uniform `borderRadius` only — per-corner radii are not applied to the shimmer.
|
|
@@ -183,10 +191,6 @@ All shimmer instances sharing the same `speed` are automatically synchronized vi
|
|
|
183
191
|
|
|
184
192
|
The shimmer respects uniform `borderRadius` and standard view styles.
|
|
185
193
|
|
|
186
|
-
## Breaking changes (beta)
|
|
187
|
-
|
|
188
|
-
- When `GleamView.Line` children are present, the parent `GleamView` renders as a plain `View` container. `onTransitionEnd` on the parent is ignored in this mode — use `onTransitionEnd` on individual `GleamView.Line` components instead. A dev warning is emitted if this happens.
|
|
189
|
-
|
|
190
194
|
## Limitations
|
|
191
195
|
|
|
192
196
|
- The shimmer overlay supports uniform `borderRadius` only — per-corner radii are not applied to the shimmer.
|
|
@@ -159,6 +159,7 @@ class GleamView(context: Context) : ReactViewGroup(context) {
|
|
|
159
159
|
super.onDetachedFromWindow()
|
|
160
160
|
unregisterClock()
|
|
161
161
|
isTransitioning = false
|
|
162
|
+
transitionAnimator?.removeAllListeners()
|
|
162
163
|
transitionAnimator?.cancel()
|
|
163
164
|
transitionAnimator = null
|
|
164
165
|
}
|
|
@@ -174,6 +175,7 @@ class GleamView(context: Context) : ReactViewGroup(context) {
|
|
|
174
175
|
fun cleanup() {
|
|
175
176
|
unregisterClock()
|
|
176
177
|
isTransitioning = false
|
|
178
|
+
transitionAnimator?.removeAllListeners()
|
|
177
179
|
transitionAnimator?.cancel()
|
|
178
180
|
transitionAnimator = null
|
|
179
181
|
}
|
|
@@ -432,9 +434,9 @@ class GleamView(context: Context) : ReactViewGroup(context) {
|
|
|
432
434
|
private fun start() {
|
|
433
435
|
frameCallback = Choreographer.FrameCallback { frameTimeNanos ->
|
|
434
436
|
val timeMs = frameTimeNanos / 1_000_000f
|
|
435
|
-
|
|
436
|
-
for (i in
|
|
437
|
-
|
|
437
|
+
val snapshot = views.toList()
|
|
438
|
+
for (i in snapshot.indices.reversed()) {
|
|
439
|
+
snapshot[i].onFrame(timeMs)
|
|
438
440
|
}
|
|
439
441
|
frameCallback?.let { Choreographer.getInstance().postFrameCallback(it) }
|
|
440
442
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useContext","useLayoutEffect","View","NativeGleamView","GleamContext","jsx","_jsx","GleamLine","children","style","testID","delay","onTransitionEnd","accessibilityProps","ctx","register","registerLine","__DEV__","console","warn","loading","speed","direction","transitionDuration","transitionType","intensity","baseColor","highlightColor"],"sourceRoot":"../../src","sources":["GleamLine.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,eAAe,QAAwB,OAAO;AACnE,SACEC,IAAI,QAIC,cAAc;AACrB,OAAOC,eAAe,MAA4B,4BAA4B;AAC9E,SAASC,YAAY,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;
|
|
1
|
+
{"version":3,"names":["useContext","useLayoutEffect","View","NativeGleamView","GleamContext","jsx","_jsx","GleamLine","children","style","testID","delay","onTransitionEnd","accessibilityProps","ctx","register","registerLine","__DEV__","console","warn","loading","speed","direction","transitionDuration","transitionType","intensity","baseColor","highlightColor"],"sourceRoot":"../../src","sources":["GleamLine.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,eAAe,QAAwB,OAAO;AACnE,SACEC,IAAI,QAIC,cAAc;AACrB,OAAOC,eAAe,MAA4B,4BAA4B;AAC9E,SAASC,YAAY,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAa9C,OAAO,SAASC,SAASA,CAAC;EACxBC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,eAAe;EACf,GAAGC;AACW,CAAC,EAAE;EACjB,MAAMC,GAAG,GAAGd,UAAU,CAACI,YAAY,CAAC;EACpC,MAAMW,QAAQ,GAAGD,GAAG,EAAEE,YAAY;EAElCf,eAAe,CAAC,MAAM;IACpB,IAAI,CAACc,QAAQ,EAAE;IACf,OAAOA,QAAQ,CAAC,CAAC;EACnB,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAI,CAACD,GAAG,EAAE;IACR,IAAIG,OAAO,EAAE;MACXC,OAAO,CAACC,IAAI,CAAC,gDAAgD,CAAC;IAChE;IACA,oBACEb,IAAA,CAACJ,IAAI;MAACO,KAAK,EAAEA,KAAM;MAACC,MAAM,EAAEA,MAAO;MAAA,GAAKG,kBAAkB;MAAAL,QAAA,EACvDA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEF,IAAA,CAACH,eAAe;IACdiB,OAAO,EAAEN,GAAG,CAACM,OAAQ;IACrBC,KAAK,EAAEP,GAAG,CAACO,KAAM;IACjBC,SAAS,EAAER,GAAG,CAACQ,SAAU;IACzBX,KAAK,EAAEA,KAAM;IACbY,kBAAkB,EAAET,GAAG,CAACS,kBAAmB;IAC3CC,cAAc,EAAEV,GAAG,CAACU,cAAe;IACnCC,SAAS,EAAEX,GAAG,CAACW,SAAU;IACzBC,SAAS,EAAEZ,GAAG,CAACY,SAAU;IACzBC,cAAc,EAAEb,GAAG,CAACa,cAAe;IACnCf,eAAe,EAAEA,eAAgB;IACjCH,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IAAA,GACXG,kBAAkB;IAAAL,QAAA,EAErBA;EAAQ,CACM,CAAC;AAEtB","ignoreList":[]}
|
|
@@ -6,18 +6,28 @@ import {
|
|
|
6
6
|
} from 'react-native';
|
|
7
7
|
|
|
8
8
|
export interface NativeProps extends ViewProps {
|
|
9
|
+
/** Toggle shimmer on/off. @default true */
|
|
9
10
|
loading?: CodegenTypes.WithDefault<boolean, true>;
|
|
11
|
+
/** Duration of one shimmer cycle in milliseconds. @default 1000 */
|
|
10
12
|
speed?: CodegenTypes.WithDefault<CodegenTypes.Float, 1000>;
|
|
13
|
+
/** Animation sweep direction. @default 'ltr' */
|
|
11
14
|
direction?: CodegenTypes.WithDefault<'ltr' | 'rtl' | 'ttb', 'ltr'>;
|
|
15
|
+
/** Phase offset in milliseconds — use to stagger multiple shimmers. @default 0 */
|
|
12
16
|
delay?: CodegenTypes.WithDefault<CodegenTypes.Float, 0>;
|
|
17
|
+
/** Duration of the loading-to-content transition in milliseconds. `0` = instant. @default 300 */
|
|
13
18
|
transitionDuration?: CodegenTypes.WithDefault<CodegenTypes.Float, 300>;
|
|
19
|
+
/** Transition style when loading ends. @default 'fade' */
|
|
14
20
|
transitionType?: CodegenTypes.WithDefault<
|
|
15
21
|
'fade' | 'shrink' | 'collapse',
|
|
16
22
|
'fade'
|
|
17
23
|
>;
|
|
24
|
+
/** Highlight strength (0–1). Lower values produce a more subtle shimmer. @default 1 */
|
|
18
25
|
intensity?: CodegenTypes.WithDefault<CodegenTypes.Float, 1>;
|
|
26
|
+
/** Background color of the shimmer. @default '#E0E0E0' */
|
|
19
27
|
baseColor?: ColorValue;
|
|
28
|
+
/** Color of the moving highlight. @default '#F5F5F5' */
|
|
20
29
|
highlightColor?: ColorValue;
|
|
30
|
+
/** Called when the transition completes or is interrupted. `finished` is `true` if completed, `false` if interrupted. */
|
|
21
31
|
onTransitionEnd?: CodegenTypes.DirectEventHandler<
|
|
22
32
|
Readonly<{ finished: boolean }>
|
|
23
33
|
>;
|
|
@@ -3,9 +3,12 @@ import { type AccessibilityProps, type StyleProp, type ViewStyle } from 'react-n
|
|
|
3
3
|
import { type NativeProps } from './GleamViewNativeComponent';
|
|
4
4
|
export interface GleamLineProps extends AccessibilityProps {
|
|
5
5
|
children?: ReactNode;
|
|
6
|
+
/** Style for the shimmer bar (height, width, borderRadius, etc.). */
|
|
6
7
|
style?: StyleProp<ViewStyle>;
|
|
7
8
|
testID?: string;
|
|
9
|
+
/** Phase offset in milliseconds — overrides the parent's delay for this line. */
|
|
8
10
|
delay?: NativeProps['delay'];
|
|
11
|
+
/** Called when this line's transition completes or is interrupted. */
|
|
9
12
|
onTransitionEnd?: NativeProps['onTransitionEnd'];
|
|
10
13
|
}
|
|
11
14
|
export declare function GleamLine({ children, style, testID, delay, onTransitionEnd, ...accessibilityProps }: GleamLineProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GleamLine.d.ts","sourceRoot":"","sources":["../../../src/GleamLine.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CAClD;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,EACL,eAAe,EACf,GAAG,kBAAkB,EACtB,EAAE,cAAc,2CAuChB"}
|
|
1
|
+
{"version":3,"file":"GleamLine.d.ts","sourceRoot":"","sources":["../../../src/GleamLine.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAG/E,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,sEAAsE;IACtE,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CAClD;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,EACL,eAAe,EACf,GAAG,kBAAkB,EACtB,EAAE,cAAc,2CAuChB"}
|
|
@@ -1,14 +1,24 @@
|
|
|
1
1
|
import { type ColorValue, type ViewProps, type CodegenTypes } from 'react-native';
|
|
2
2
|
export interface NativeProps extends ViewProps {
|
|
3
|
+
/** Toggle shimmer on/off. @default true */
|
|
3
4
|
loading?: CodegenTypes.WithDefault<boolean, true>;
|
|
5
|
+
/** Duration of one shimmer cycle in milliseconds. @default 1000 */
|
|
4
6
|
speed?: CodegenTypes.WithDefault<CodegenTypes.Float, 1000>;
|
|
7
|
+
/** Animation sweep direction. @default 'ltr' */
|
|
5
8
|
direction?: CodegenTypes.WithDefault<'ltr' | 'rtl' | 'ttb', 'ltr'>;
|
|
9
|
+
/** Phase offset in milliseconds — use to stagger multiple shimmers. @default 0 */
|
|
6
10
|
delay?: CodegenTypes.WithDefault<CodegenTypes.Float, 0>;
|
|
11
|
+
/** Duration of the loading-to-content transition in milliseconds. `0` = instant. @default 300 */
|
|
7
12
|
transitionDuration?: CodegenTypes.WithDefault<CodegenTypes.Float, 300>;
|
|
13
|
+
/** Transition style when loading ends. @default 'fade' */
|
|
8
14
|
transitionType?: CodegenTypes.WithDefault<'fade' | 'shrink' | 'collapse', 'fade'>;
|
|
15
|
+
/** Highlight strength (0–1). Lower values produce a more subtle shimmer. @default 1 */
|
|
9
16
|
intensity?: CodegenTypes.WithDefault<CodegenTypes.Float, 1>;
|
|
17
|
+
/** Background color of the shimmer. @default '#E0E0E0' */
|
|
10
18
|
baseColor?: ColorValue;
|
|
19
|
+
/** Color of the moving highlight. @default '#F5F5F5' */
|
|
11
20
|
highlightColor?: ColorValue;
|
|
21
|
+
/** Called when the transition completes or is interrupted. `finished` is `true` if completed, `false` if interrupted. */
|
|
12
22
|
onTransitionEnd?: CodegenTypes.DirectEventHandler<Readonly<{
|
|
13
23
|
finished: boolean;
|
|
14
24
|
}>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GleamViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/GleamViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,YAAY,EAClB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,OAAO,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAClD,KAAK,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACxD,kBAAkB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACvE,cAAc,CAAC,EAAE,YAAY,CAAC,WAAW,CACvC,MAAM,GAAG,QAAQ,GAAG,UAAU,EAC9B,MAAM,CACP,CAAC;IACF,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,eAAe,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAC/C,QAAQ,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAChC,CAAC;CACH;;AAED,wBAAgE"}
|
|
1
|
+
{"version":3,"file":"GleamViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/GleamViewNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,YAAY,EAClB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,2CAA2C;IAC3C,OAAO,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAClD,mEAAmE;IACnE,KAAK,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC3D,gDAAgD;IAChD,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,CAAC,CAAC;IACnE,kFAAkF;IAClF,KAAK,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACxD,iGAAiG;IACjG,kBAAkB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACvE,0DAA0D;IAC1D,cAAc,CAAC,EAAE,YAAY,CAAC,WAAW,CACvC,MAAM,GAAG,QAAQ,GAAG,UAAU,EAC9B,MAAM,CACP,CAAC;IACF,uFAAuF;IACvF,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC5D,0DAA0D;IAC1D,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,wDAAwD;IACxD,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,yHAAyH;IACzH,eAAe,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAC/C,QAAQ,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAChC,CAAC;CACH;;AAED,wBAAgE"}
|
package/package.json
CHANGED
package/src/GleamLine.tsx
CHANGED
|
@@ -10,9 +10,12 @@ import { GleamContext } from './GleamContext';
|
|
|
10
10
|
|
|
11
11
|
export interface GleamLineProps extends AccessibilityProps {
|
|
12
12
|
children?: ReactNode;
|
|
13
|
+
/** Style for the shimmer bar (height, width, borderRadius, etc.). */
|
|
13
14
|
style?: StyleProp<ViewStyle>;
|
|
14
15
|
testID?: string;
|
|
16
|
+
/** Phase offset in milliseconds — overrides the parent's delay for this line. */
|
|
15
17
|
delay?: NativeProps['delay'];
|
|
18
|
+
/** Called when this line's transition completes or is interrupted. */
|
|
16
19
|
onTransitionEnd?: NativeProps['onTransitionEnd'];
|
|
17
20
|
}
|
|
18
21
|
|
|
@@ -6,18 +6,28 @@ import {
|
|
|
6
6
|
} from 'react-native';
|
|
7
7
|
|
|
8
8
|
export interface NativeProps extends ViewProps {
|
|
9
|
+
/** Toggle shimmer on/off. @default true */
|
|
9
10
|
loading?: CodegenTypes.WithDefault<boolean, true>;
|
|
11
|
+
/** Duration of one shimmer cycle in milliseconds. @default 1000 */
|
|
10
12
|
speed?: CodegenTypes.WithDefault<CodegenTypes.Float, 1000>;
|
|
13
|
+
/** Animation sweep direction. @default 'ltr' */
|
|
11
14
|
direction?: CodegenTypes.WithDefault<'ltr' | 'rtl' | 'ttb', 'ltr'>;
|
|
15
|
+
/** Phase offset in milliseconds — use to stagger multiple shimmers. @default 0 */
|
|
12
16
|
delay?: CodegenTypes.WithDefault<CodegenTypes.Float, 0>;
|
|
17
|
+
/** Duration of the loading-to-content transition in milliseconds. `0` = instant. @default 300 */
|
|
13
18
|
transitionDuration?: CodegenTypes.WithDefault<CodegenTypes.Float, 300>;
|
|
19
|
+
/** Transition style when loading ends. @default 'fade' */
|
|
14
20
|
transitionType?: CodegenTypes.WithDefault<
|
|
15
21
|
'fade' | 'shrink' | 'collapse',
|
|
16
22
|
'fade'
|
|
17
23
|
>;
|
|
24
|
+
/** Highlight strength (0–1). Lower values produce a more subtle shimmer. @default 1 */
|
|
18
25
|
intensity?: CodegenTypes.WithDefault<CodegenTypes.Float, 1>;
|
|
26
|
+
/** Background color of the shimmer. @default '#E0E0E0' */
|
|
19
27
|
baseColor?: ColorValue;
|
|
28
|
+
/** Color of the moving highlight. @default '#F5F5F5' */
|
|
20
29
|
highlightColor?: ColorValue;
|
|
30
|
+
/** Called when the transition completes or is interrupted. `finished` is `true` if completed, `false` if interrupted. */
|
|
21
31
|
onTransitionEnd?: CodegenTypes.DirectEventHandler<
|
|
22
32
|
Readonly<{ finished: boolean }>
|
|
23
33
|
>;
|