Skip to content

Commit

Permalink
Issue fix #118
Browse files Browse the repository at this point in the history
  • Loading branch information
@mohitk05
mohitk05 committed Jun 12, 2021
1 parent b376b84 commit 4e128d7
Show file tree
Hide file tree
Showing 5 changed files with 27 additions and 21 deletions.
37 changes: 19 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,24 +45,25 @@ Here `stories` is an array of story objects, which can be of various types as de

## Props

| Property | Type | Default | Description |
| -------------------- | --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `stories` | [String/Object] | `required` | An array of image urls or array of story objects (options described below) |
| `renderers` ⚡️ | [Object] | `[]` | An array of renderer objects (options described below) |
| `defaultInterval` | Number | 1200 | Milliseconds duration for which a story persists |
| `loader` | Component | Ripple loader | A loader component as a fallback until image loads from url |
| `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. |
| `width` | Number/String | 360 | Width of the component, e.g. 600 or '100vw' or 'inherit' |
| `height` | Number/String | 640 | Height of the component, e.g. 1000 or '100%' or 'inherit' |
| `storyStyles` | Object | none | Override the default story styles mentioned below. |
| `loop` | Boolean | false | The last story loop to the first one and restart the stories. |
| **New props** | ⭐️ | ⭐️ | ⭐️ |
| `isPaused` | Boolean | false | Toggle story playing state |
| `currentIndex` | Number | undefined | Set the current story index |
| `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 |
| `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 |
| Property | Type | Default | Description |
| ---------------------- | --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `stories` | [String/Object] | `required` | An array of image urls or array of story objects (options described below) |
| `renderers` ⚡️ | [Object] | `[]` | An array of renderer objects (options described below) |
| `defaultInterval` | Number | 1200 | Milliseconds duration for which a story persists |
| `loader` | Component | Ripple loader | A loader component as a fallback until image loads from url |
| `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. |
| `storyContainerStyles` | Object | `{}` | Styles object for the outer container |
| `width` | Number/String | 360 | Width of the component, e.g. 600 or '100vw' or 'inherit' |
| `height` | Number/String | 640 | Height of the component, e.g. 1000 or '100%' or 'inherit' |
| `storyStyles` | Object | none | Override the default story styles mentioned below. |
| `loop` | Boolean | false | The last story loop to the first one and restart the stories. |
| **New props** | ⭐️ | ⭐️ | ⭐️ |
| `isPaused` | Boolean | false | Toggle story playing state |
| `currentIndex` | Number | undefined | Set the current story index |
| `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 |
| `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 |

### Story object

Expand Down
4 changes: 2 additions & 2 deletions src/components/Container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function () {

let mousedownId = useRef<any>();

const { width, height, loop, currentIndex, isPaused, keyboardNavigation } = useContext<GlobalCtx>(GlobalContext);
const { width, height, loop, currentIndex, isPaused, keyboardNavigation, storyContainerStyles = {} } = useContext<GlobalCtx>(GlobalContext);
const { stories } = useContext<StoriesContextInterface>(StoriesContext);

useEffect(() => {
Expand Down Expand Up @@ -107,7 +107,7 @@ export default function () {
}

return (
<div style={{ ...styles.container, ...{ width, height } }}>
<div style={{ ...storyContainerStyles, ...styles.container, ...{ width, height } }}>
<ProgressContext.Provider value={{
bufferAction: bufferAction,
videoDuration: videoDuration,
Expand Down
4 changes: 3 additions & 1 deletion src/components/Story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ const Story = (props: StoryProps) => {
};

return (
<div style={{ ...styles.story, width: width, height: height }}>
<div
style={{ ...styles.story, width: width, height: height }}
>
{getStoryContent()}
</div>
);
Expand Down
1 change: 1 addition & 0 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const ReactInstaStories = function (props: ReactInstaStoriesProps) {
height: props.height,
loader: props.loader,
header: props.header,
storyContainerStyles: props.storyContainerStyles,
storyStyles: props.storyStyles,
loop: props.loop,
defaultInterval: props.defaultInterval,
Expand Down
2 changes: 2 additions & 0 deletions src/interfaces.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export interface ReactInstaStoriesProps {
height?: NumberOrString;
loader?: JSX.Element;
header?: Function;
storyContainerStyles?: Record<string, any>;
storyStyles?: Object;
loop?: boolean;
defaultInterval?: number;
Expand All @@ -26,6 +27,7 @@ export interface GlobalCtx {
height?: NumberOrString;
loader?: JSX.Element;
header?: Function;
storyContainerStyles?: Record<string, any>;
storyStyles?: Object;
loop?: boolean;
defaultInterval?: number;
Expand Down

0 comments on commit 4e128d7

Please sign in to comment.