@@ -3,59 +3,70 @@ import { SkinViewer, type SkinViewerOptions } from "skinview3d";
33import type { HTMLAttributes } from "react" ;
44
55/**
6- * This is the interface that describes the parameter in `onReady`
6+ * Interface describing the callback parameters when the skin viewer is ready
77 */
88export interface ViewerReadyCallbackOptions {
99 /**
10- * The instance of the skinview3d
10+ * The instance of the skinview3d viewer that can be used to control the skin display
1111 */
1212 viewer : SkinViewer ;
1313 /**
14- * The ref to the canvas element
14+ * The reference to the canvas element where the skin is rendered
1515 */
1616 canvasRef : HTMLCanvasElement ;
1717}
1818
19+ /**
20+ * Props interface for the ReactSkinview3d component
21+ */
1922export interface ReactSkinview3dOptions {
2023 /**
21- * The class names to apply to the canvas
24+ * CSS class names to apply to the canvas element
2225 */
2326 className ?: HTMLAttributes < HTMLCanvasElement > [ "className" ] ;
2427 /**
25- * The width of the canvas
28+ * The width of the canvas in pixels or as a CSS value
2629 */
2730 width : number | string ;
2831 /**
29- * The height of the canvas
32+ * The height of the canvas in pixels or as a CSS value
3033 */
3134 height : number | string ;
3235 /**
33- * The skin to load in the canvas
36+ * URL of the Minecraft skin texture to display
3437 */
3538 skinUrl : string ;
3639 /**
37- * The cape to load in the canvas
40+ * Optional URL of the Minecraft cape texture to display
3841 */
3942 capeUrl ?: string ;
4043 /**
41- * A function that is called when the skin viewer is ready
42- * @param {SkinViewer } instance callback function to execute when the viewer is loaded {@link SkinViewer}
44+ * A callback function that is called when the skin viewer is ready
45+ * @param {ViewerReadyCallbackOptions } options - The options object containing the viewer instance and canvas reference
46+ * @param {SkinViewer } options.viewer - The instance of the skinview3d viewer
47+ * @param {HTMLCanvasElement } options.canvasRef - The reference to the canvas element
4348 * @example
44- * onReady((instance) => {
45- * console.log(instance)
46- * })
49+ * ```tsx
50+ * onReady={({ viewer, canvasRef }) => {
51+ * // Access the viewer instance
52+ * viewer.autoRotate = true;
53+ * // Access the canvas element
54+ * console.log(canvasRef);
55+ * }}
56+ * ```
4757 */
4858 onReady ?: ( { viewer, canvasRef } : ViewerReadyCallbackOptions ) => void ;
4959 /**
50- * Parameters passed to the skinview3d constructor allowing you to override or add extra features
51- * @notes please take a look at the upstream repo for more info
52- * [bs-community/skinview3d](https://bs-community.github.io/skinview3d/)
60+ * Additional configuration options passed directly to the skinview3d constructor
61+ * @see [skinview3d documentation](https://bs-community.github.io/skinview3d/) for available options
5362 */
5463 options ?: SkinViewerOptions ;
5564}
5665
5766/**
58- * A skinview3d component
67+ * React component that renders a 3D Minecraft skin viewer
68+ * @param {ReactSkinview3dOptions } props - The component props
69+ * @returns {React.ReactElement } A canvas element with the 3D skin viewer
5970 */
6071const ReactSkinview3d = ( {
6172 className,
0 commit comments