Merge pull request #281 from edoardoo/feat/buttons-listeners

feat: add onPrevious and onNext events

README.md

@@ -66,6 +66,8 @@ Here `stories` is an array of story objects, which can be of various types as de
 | `onStoryStart`         | Function        | -                         | Callback when a story starts                                                                                                                                        |
 | `onStoryEnd`           | Function        | -                         | Callback when a story ends                                                                                                                                          |
 | `onAllStoriesEnd`      | Function        | -                         | Callback when all stories in the array have ended                                                                                                                   |
+| `onNext`               | Function        | -                         | Callback when the user taps/press to proceed to the next story                                                                                                                   |
+| `onPrevious`           | Function        | -                         | Callback when the user taps/press to go back to the previous story                                                                                                                    |
 | `keyboardNavigation`   | Boolean         | false                     | Attaches arrow key listeners to navigate between stories if true. Also adds up arrow key listener for opening See More and Escape/down arrow for closing it         |
 | `preventDefault`       | Boolean         | false                     | Disable the default behavior when user click the component                                                                                                          |
 

example/src/App.js

@@ -205,6 +205,8 @@ function App() {
             onStoryEnd={(s, st) => console.log("story ended", s, st)}
             onAllStoriesEnd={(s, st) => console.log("all stories ended", s, st)}
             onStoryStart={(s, st) => console.log("story started", s, st)}
+            onNext={() => console.log("next button pressed")}
+            onPrevious={() => console.log("previous button pressed")}
             storyContainerStyles={{ borderRadius: 8, overflow: "hidden" }}
           />
         </Suspense>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-insta-stories",
-	"version": "2.5.9",
+	"version": "2.6.0",
 	"description": "A React component for Instagram like stories",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",

src/components/Container.tsx

@@ -29,6 +29,8 @@ export default function () {
     preventDefault,
     storyContainerStyles = {},
     onAllStoriesEnd,
+    onPrevious,
+    onNext
   } = useContext<GlobalCtx>(GlobalContext);
   const { stories } = useContext<StoriesContextInterface>(StoriesContext);
 
@@ -84,10 +86,16 @@ export default function () {
   };
 
   const previous = () => {
+    if(onPrevious != undefined){
+      onPrevious();
+    }
     setCurrentIdWrapper((prev) => (prev > 0 ? prev - 1 : prev));
   };
 
   const next = () => {
+    if(onNext != undefined){
+      onNext();
+    }
     // Check if component is mounted - for issue #130 (https://github.com/mohitk05/react-insta-stories/issues/130)
     if (isMounted()) {
       if (loop) {

src/index.tsx

@@ -28,6 +28,8 @@ const ReactInstaStories = function (props: ReactInstaStoriesProps) {
         onStoryStart: props.onStoryStart,
         onStoryEnd: props.onStoryEnd,
         onAllStoriesEnd: props.onAllStoriesEnd,
+        onNext: props.onNext,
+        onPrevious: props.onPrevious,
         keyboardNavigation: props.keyboardNavigation,
         preventDefault: props.preventDefault
     }

src/interfaces.tsx

@@ -23,6 +23,8 @@ export interface ReactInstaStoriesProps {
   onAllStoriesEnd?: Function;
   onStoryStart?: Function;
   onStoryEnd?: Function;
+  onNext?: Function;
+  onPrevious?: Function;
   keyboardNavigation?: boolean;
   preventDefault?: boolean;
 }
@@ -49,6 +51,8 @@ export interface GlobalCtx {
   onAllStoriesEnd?: Function;
   onStoryStart?: Function;
   onStoryEnd?: Function;
+  onPrevious?: Function;
+  onNext?: Function;
   keyboardNavigation?: boolean;
   preventDefault?: boolean;
 }