From 4e128d75307d4c39a5daeeb1c53fa7607eec860f Mon Sep 17 00:00:00 2001 From: Mohit Karekar Date: Sat, 12 Jun 2021 13:10:58 +0530 Subject: [PATCH] Issue fix #118 --- README.md | 37 ++++++++++++++++++------------------ src/components/Container.tsx | 4 ++-- src/components/Story.tsx | 4 +++- src/index.tsx | 1 + src/interfaces.tsx | 2 ++ 5 files changed, 27 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 97722c7e4..1ab5bd537 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/src/components/Container.tsx b/src/components/Container.tsx index ba9c773fa..adfd9deba 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -14,7 +14,7 @@ export default function () { let mousedownId = useRef(); - const { width, height, loop, currentIndex, isPaused, keyboardNavigation } = useContext(GlobalContext); + const { width, height, loop, currentIndex, isPaused, keyboardNavigation, storyContainerStyles = {} } = useContext(GlobalContext); const { stories } = useContext(StoriesContext); useEffect(() => { @@ -107,7 +107,7 @@ export default function () { } return ( -
+
{ }; return ( -
+
{getStoryContent()}
); diff --git a/src/index.tsx b/src/index.tsx index 3f5ca8977..1348b3809 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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, diff --git a/src/interfaces.tsx b/src/interfaces.tsx index 5e0b4d439..e479eb829 100644 --- a/src/interfaces.tsx +++ b/src/interfaces.tsx @@ -6,6 +6,7 @@ export interface ReactInstaStoriesProps { height?: NumberOrString; loader?: JSX.Element; header?: Function; + storyContainerStyles?: Record; storyStyles?: Object; loop?: boolean; defaultInterval?: number; @@ -26,6 +27,7 @@ export interface GlobalCtx { height?: NumberOrString; loader?: JSX.Element; header?: Function; + storyContainerStyles?: Record; storyStyles?: Object; loop?: boolean; defaultInterval?: number;