fix(useref): fix type for useref and update documentation (#183)

* fix(useref): fix type for useref and update documentation * style(lint): fix lint issues
femioladeji · Jul 4, 2022 · 03ef61c · 03ef61c
1 parent 9b82435
commit 03ef61c
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-slideshow-image",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "An image slideshow with react",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/src/fade.tsx b/src/fade.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { FadeZoom } from './fadezoom';
 import { defaultProps } from './props';
-import { FadeProps } from './types';
+import { FadeProps, SlideshowRef } from './types';
 
-export const Fade = React.forwardRef((props: FadeProps, ref) => {
+export const Fade = React.forwardRef<SlideshowRef, FadeProps>((props, ref) => {
     return <FadeZoom {...props} scale={1} ref={ref} />;
 });
 

diff --git a/src/fadezoom.tsx b/src/fadezoom.tsx
@@ -15,10 +15,10 @@ import {
     showNextArrow,
     showPreviousArrow,
 } from './helpers';
-import { ButtonClick, ZoomProps } from './types';
+import { ButtonClick, SlideshowRef, ZoomProps } from './types';
 import { defaultProps } from './props';
 
-export const FadeZoom = React.forwardRef((props: ZoomProps, ref) => {
+export const FadeZoom = React.forwardRef<SlideshowRef, ZoomProps>((props, ref) => {
     const [index, setIndex] = useState<number>(
         getStartingIndex(props.children, props.defaultIndex)
     );

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,4 +4,4 @@
 export { Fade } from './fade';
 export { Zoom } from './zoom';
 export { Slide } from './slide';
-export { FadeProps, ZoomProps, SlideProps } from './types';
+export { FadeProps, ZoomProps, SlideProps, SlideshowRef } from './types';
diff --git a/src/slide.tsx b/src/slide.tsx
@@ -15,10 +15,10 @@ import {
     showNextArrow,
     showPreviousArrow,
 } from './helpers';
-import { ButtonClick, SlideProps } from './types';
+import { ButtonClick, SlideshowRef, SlideProps } from './types';
 import { defaultProps } from './props';
 
-export const Slide = React.forwardRef((props: SlideProps, ref) => {
+export const Slide = React.forwardRef<SlideshowRef, SlideProps>((props, ref) => {
     const [index, setIndex] = useState(getStartingIndex(props.children, props.defaultIndex));
     const [wrapperWidth, setWrapperWidth] = useState<number>(0);
     const wrapperRef = useRef<HTMLDivElement>(null);

diff --git a/src/types.ts b/src/types.ts
@@ -66,3 +66,9 @@ export type IndicatorPropsType = {
 };
 
 export type TweenEasingFn = (amount: number) => number;
+
+export type SlideshowRef = {
+  goNext: () => void;
+  goBack: () => void;
+  goTo: (index: number) => void;
+};
diff --git a/src/zoom.tsx b/src/zoom.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { FadeZoom } from './fadezoom';
 import { defaultProps } from './props';
-import { ZoomProps } from './types';
+import { SlideshowRef, ZoomProps } from './types';
 
-export const Zoom = React.forwardRef((props: ZoomProps, ref) => {
+export const Zoom = React.forwardRef<SlideshowRef, ZoomProps>((props, ref) => {
     return <FadeZoom {...props} ref={ref} />;
 });
 

diff --git a/stories/Methods.mdx b/stories/Methods.mdx
@@ -10,11 +10,11 @@ The `goTo(index)` method goes to a particular index. It takes an integer as the
 
 ```tsx
 import React from 'react';
-import { Slide } from 'react-slideshow-image';
+import { Slide, SlideshowRef } from 'react-slideshow-image';
 import 'react-slideshow-image/dist/styles.css';
 
 const Example = () => {
-    const slideRef = useRef(null)
+    const slideRef = useRef<SlideshowRef>(null)
     return (
         <>
             <Slide indicators={true} ref={slideRef}>
@@ -25,7 +25,7 @@ const Example = () => {
             </Slide>
             <div style={{display: 'flex', justifyContent: 'center', margin: '50px 0'}}>
                 <button type="button" style={{marginRight: '20px'}} onClick={() => slideRef.current.goBack()}>Back</button>
-                <button type="button" style={{marginRight: '20px'}} onClick={() => slideRef.current.next()}>Next</button>
+                <button type="button" style={{marginRight: '20px'}} onClick={() => slideRef.current.goNext()}>Next</button>
                 <select onChange={(event) => slideRef.current.goTo(parseInt(event.currentTarget.value))}>
                     <option>--Select--</option>
                     <option value="0">First</option>

diff --git a/stories/Methods.stories.tsx b/stories/Methods.stories.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Slide } from '../src';
+import { Slide, SlideshowRef } from '../src';
 import type { SlideProps } from '../src';
 import mdx from './Methods.mdx';
-import { useRef } from '@storybook/addons';
 
 const meta: Meta = {
     title: 'Examples/Methods',
@@ -19,7 +18,7 @@ const meta: Meta = {
 export default meta;
 
 const Template: Story<SlideProps> = args => {
-    const slideRef = useRef(null)
+    const slideRef = useRef<SlideshowRef>(null)
     return <>
         <Slide indicators={true} ref={slideRef}>
             <div style={{textAlign: 'center', background: 'red', padding: '200px 0', fontSize: '30px'}}>First Slide</div>
@@ -29,7 +28,7 @@ const Template: Story<SlideProps> = args => {
         </Slide>
         <div style={{display: 'flex', justifyContent: 'center', margin: '50px 0'}}>
             <button type="button" style={{marginRight: '20px'}} onClick={() => slideRef.current.goBack()}>Back</button>
-            <button type="button" style={{marginRight: '20px'}} onClick={() => slideRef.current.next()}>Next</button>
+            <button type="button" style={{marginRight: '20px'}} onClick={() => slideRef.current.goNext()}>Next</button>
             <select onChange={(event) => slideRef.current.goTo(parseInt(event.currentTarget.value))}>
                 <option>--Select--</option>
                 <option value="0">First</option>