This section explains how to migrate the Skeleton component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.
| EJ2 React | React | Description |
|---|
Props: shape <SkeletonComponent shape= 'Circle' width= "48px"></SkeletonComponent> | Props: variants <Skeleton variant={Variants.Circle} width={48} /> | In EJ2 React, the shape property accepts string values like 'Circle', while in React, the equivalent property is named variant and uses typed enums like Variants.Circle for better type safety. |
Props: cssClass <SkeletonComponent shape='Circle' width="60px" cssClass='e-customize'></SkeletonComponent> | Props: className <Skeleton variant={Variants.Circle} width={48} className='e-customize' /> | The cssClass prop in EJ2 React is replaced with the standard React className prop in React. |
Props: shimmerEffect <SkeletonComponent shape= 'Circle' width= "60px" shimmerEffect= 'Pulse'></SkeletonComponent> | Props: Animations <Skeleton variant={Variants.Circle} animation={AnimationType.Pulse} width={45} height={45} /> | In EJ2 React, the animation effect is controlled using the shimmerEffect property with string values like 'Pulse', while in React, it's renamed to animation and uses typed enums like AnimationType.Pulse for better type safety. |
| EJ2 React | React | Description |
|---|
Methods: destroy() <SkeletonComponent id="Skeleton"
shape= 'Circle'
ref={(scope) => {
this.SkeletonObj = scope
} />
constructor(props: {}) {
this.SkeletonObj.destroy();
}}
| useEffect(() => {
return () => {
console.log('destroyed');
};
}, []);
<Skeleton variant={Variants.Circle}></Skeleton>
| The destroyed callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React useEffect hook to execute logic on component unmount. |