Skip to content

Commit 49c1c28

Browse files
slytterslytter
committed
Merge remote-tracking branch 'upstream/master'
2 parents 0149d19 + ed0b93b commit 49c1c28

File tree

8 files changed

+56
-37
lines changed

8 files changed

+56
-37
lines changed

‎README.md

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -45,30 +45,32 @@ Here `stories` is an array of story objects, which can be of various types as de
4545

4646
## Props
4747

48-
| Property | Type | Default | Description |
49-
|---------------------------|-----------------|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
50-
| `stories` | [String/Object] | `required` | An array of image urls or array of story objects (options described below) |
51-
| `renderers` ⚡️ | [Object] | `[]` | An array of renderer objects (options described below) |
52-
| `defaultInterval` | Number | 1200 | Milliseconds duration for which a story persists |
53-
| `loader` | Component | Ripple loader | A loader component as a fallback until image loads from url |
54-
| `header` | Component | Default header as in demo | A header component which sits at the top of each story. It receives the `header` object from the `story` object. Data for header to be sent with each story object. |
55-
| `storyContainerStyles` | Object | `{}` | Styles object for the outer container |
56-
| `width` | Number/String | 360 | Width of the component, e.g. 600 or '100vw' or 'inherit' |
57-
| `height` | Number/String | 640 | Height of the component, e.g. 1000 or '100%' or 'inherit' |
58-
| `storyStyles` | Object | none | Override the default story styles mentioned below. |
59-
| `progressContainerStyles` | Object | `{}` | Styles object for the container wrapping the progress bars |
60-
| `progressWrapperStyles` | Object | `{}` | Styles object for the container wrapping each progress bar bars |
61-
| `progressStyles` | Object | `{}` | Styles object for the progress bars |
62-
| `loop` | Boolean | false | The last story loop to the first one and restart the stories. |
63-
| **New props** | ⭐️ | ⭐️ | ⭐️ |
64-
| `isPaused` | Boolean | false | Toggle story playing state |
65-
| `currentIndex` | Number | undefined | Set the current story index |
66-
| `onStoryStart` | Function | - | Callback when a story starts |
67-
| `onStoryEnd` | Function | - | Callback when a story ends |
68-
| `onAllStoriesEnd` | Function | - | Callback when all stories in the array have ended |
69-
| `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 |
70-
| `preventDefault` | Boolean | false | Disable the default behavior when user click the component |
71-
| `preloadCount` | number | 1 | Determines how many stories should be preloaded ahead of the current story index. |
48+
| Property | Type | Default | Description |
49+
| ---------------------- | --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
50+
| `stories` | [String/Object] | `required` | An array of image urls or array of story objects (options described below) |
51+
| `renderers` ⚡️ | [Object] | `[]` | An array of renderer objects (options described below) |
52+
| `defaultInterval` | Number | 1200 | Milliseconds duration for which a story persists |
53+
| `loader` | Component | Ripple loader | A loader component as a fallback until image loads from url |
54+
| `header` | Component | Default header as in demo | A header component which sits at the top of each story. It receives the `header` object from the `story` object. Data for header to be sent with each story object. |
55+
| `storyContainerStyles` | Object | `{}` | Styles object for the outer container |
56+
| `width` | Number/String | 360 | Width of the component, e.g. 600 or '100vw' or 'inherit' |
57+
| `height` | Number/String | 640 | Height of the component, e.g. 1000 or '100%' or 'inherit' |
58+
| `storyStyles` | Object | none | Override the default story styles mentioned below. |
59+
| `progressContainerStyles` | Object | `{}` | Styles object for the container wrapping the progress bars |
60+
| `progressWrapperStyles` | Object | `{}` | Styles object for the container wrapping each progress bar bars |
61+
| `progressStyles` | Object | `{}` | Styles object for the progress bars |
62+
| `loop` | Boolean | false | The last story loop to the first one and restart the stories. |
63+
| **New props** | ⭐️ | ⭐️ | ⭐️ |
64+
| `isPaused` | Boolean | false | Toggle story playing state |
65+
| `currentIndex` | Number | undefined | Set the current story index |
66+
| `onStoryStart` | Function | - | Callback when a story starts |
67+
| `onStoryEnd` | Function | - | Callback when a story ends |
68+
| `onAllStoriesEnd` | Function | - | Callback when all stories in the array have ended |
69+
| `onNext` | Function | - | Callback when the user taps/press to proceed to the next story |
70+
| `onPrevious` | Function | - | Callback when the user taps/press to go back to the previous story |
71+
| `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 |
72+
| `preventDefault` | Boolean | false | Disable the default behavior when user click the component |
73+
| `preloadCount` | number | 1 | Determines how many stories should be preloaded ahead of the current story index. |
7274

7375
### Story object
7476

‎example/src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,8 @@ function App() {
206206
onStoryEnd={(s, st) => console.log("story ended", s, st)}
207207
onAllStoriesEnd={(s, st) => console.log("all stories ended", s, st)}
208208
onStoryStart={(s, st) => console.log("story started", s, st)}
209+
onNext={() => console.log("next button pressed")}
210+
onPrevious={() => console.log("previous button pressed")}
209211
storyContainerStyles={{ borderRadius: 8, overflow: "hidden" }}
210212
/>
211213
</Suspense>

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-insta-stories",
3-
"version": "2.5.8",
3+
"version": "2.6.1",
44
"description": "A React component for Instagram like stories",
55
"main": "dist/index.js",
66
"types": "dist/index.d.ts",

‎src/components/Container.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export default function () {
3030
preventDefault,
3131
storyContainerStyles = {},
3232
onAllStoriesEnd,
33+
onPrevious,
34+
onNext,
3335
preloadCount,
3436
} = useContext<GlobalCtx>(GlobalContext);
3537
const { stories } = useContext<StoriesContextInterface>(StoriesContext);
@@ -74,7 +76,7 @@ export default function () {
7476
if (e.key === "ArrowLeft") {
7577
previous();
7678
} else if (e.key === "ArrowRight") {
77-
next();
79+
next({ isSkippedByUser: true });
7880
}
7981
};
8082

@@ -89,10 +91,16 @@ export default function () {
8991
};
9092

9193
const previous = () => {
94+
if (onPrevious != undefined) {
95+
onPrevious();
96+
}
9297
setCurrentIdWrapper((prev) => (prev > 0 ? prev - 1 : prev));
9398
};
9499

95-
const next = () => {
100+
const next = (options?: { isSkippedByUser?: boolean }) => {
101+
if (onNext != undefined && options?.isSkippedByUser) {
102+
onNext();
103+
}
96104
// Check if component is mounted - for issue #130 (https://github.com/mohitk05/react-insta-stories/issues/130)
97105
if (isMounted()) {
98106
if (loop) {
@@ -134,7 +142,7 @@ export default function () {
134142
if (pause) {
135143
toggleState("play");
136144
} else {
137-
type === "next" ? next() : previous();
145+
type === "next" ? next({ isSkippedByUser: true }) : previous();
138146
}
139147
};
140148

‎src/components/ProgressArray.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export default () => {
1616

1717
const { currentId, next, videoDuration, pause, bufferAction } =
1818
useContext<ProgressContext>(ProgressCtx);
19-
const {
20-
defaultInterval,
21-
onStoryEnd,
22-
onStoryStart,
19+
const {
20+
defaultInterval,
21+
onStoryEnd,
22+
onStoryStart,
2323
progressContainerStyles,
2424
} = useContext<GlobalCtx>(GlobalContext);
2525
const { stories } = useContext<StoriesContextInterface>(StoriesContext);
@@ -31,6 +31,7 @@ export default () => {
3131
useEffect(() => {
3232
if (!pause) {
3333
animationFrameId.current = requestAnimationFrame(incrementCount);
34+
lastTime.current = timestamp();
3435
}
3536
return () => {
3637
cancelAnimationFrame(animationFrameId.current);
@@ -80,10 +81,10 @@ export default () => {
8081
};
8182

8283
return (
83-
<div style={{
84+
<div style={{
8485
...styles.progressArr,
85-
...progressContainerStyles,
86-
...opacityStyles
86+
...progressContainerStyles,
87+
...opacityStyles
8788
}}>
8889
{stories.map((_, i) => (
8990
<Progress

‎src/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ const ReactInstaStories = function (props: ReactInstaStoriesProps) {
2828
onStoryStart: props.onStoryStart,
2929
onStoryEnd: props.onStoryEnd,
3030
onAllStoriesEnd: props.onAllStoriesEnd,
31+
onNext: props.onNext,
32+
onPrevious: props.onPrevious,
3133
keyboardNavigation: props.keyboardNavigation,
3234
preventDefault: props.preventDefault,
3335
preloadCount: props.preloadCount,

‎src/interfaces.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export interface ReactInstaStoriesProps {
2323
onAllStoriesEnd?: Function;
2424
onStoryStart?: Function;
2525
onStoryEnd?: Function;
26+
onNext?: Function;
27+
onPrevious?: Function;
2628
keyboardNavigation?: boolean;
2729
preventDefault?: boolean;
2830
preloadCount?: number;
@@ -50,6 +52,8 @@ export interface GlobalCtx {
5052
onAllStoriesEnd?: Function;
5153
onStoryStart?: Function;
5254
onStoryEnd?: Function;
55+
onPrevious?: Function;
56+
onNext?: Function;
5357
keyboardNavigation?: boolean;
5458
preventDefault?: boolean;
5559
preloadCount?: number;

0 commit comments

Comments
 (0)