Merge pull request #131 from mohitk05/issue#110

Issue fix #110
mohitk05 · Jun 12, 2021 · b376b84 · b376b84 · vercel · Jun 12, 2021
2 parents 2e11e24 + 9b222dd
commit b376b84
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -52,8 +52,8 @@ Here `stories` is an array of story objects, which can be of various types as de
 | `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          | 360                       | Width of the component in pixels                                                                                                                                    |
-| `height`             | Number          | 640                       | Height of the component in pixels                                                                                                                                   |
+| `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**        | ⭐️             | ⭐️                       | ⭐️                                                                                                                                                                 |

diff --git a/example/src/App.js b/example/src/App.js
@@ -59,7 +59,15 @@ class App extends React.Component {
 					<p>Know more about me here: <a rel="noopener noreferrer" href="https://mohitkarekar.com" target="_blank">mohitkarekar.com</a></p>
 				</div>
 				<div className="stories">
-					<Stories loop keyboardNavigation defaultInterval={8000} stories={stories2} 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)} />
+					<Stories
+						loop
+						keyboardNavigation
+						defaultInterval={8000}
+						stories={stories2}
+						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)}
+					/>
 				</div>
 			</div>
 		);
@@ -99,7 +107,7 @@ const stories2 = [
 	},
 	{
 		content: ({ action, story }) => {
-			return <WithSeeMore story={story} action={action}><div style={{ background: 'pink', padding: 20 }}>
+			return <WithSeeMore story={story} action={action}><div style={{ background: 'pink', padding: 20, height: '100%' }}>
 				<h1 style={{ marginTop: '100%', marginBottom: 0 }}>🌝</h1>
 				<h1 style={{ marginTop: 5 }}>We have our good old image and video stories, just the same.</h1>
 			</div></WithSeeMore>
@@ -138,7 +146,8 @@ const contentStyle = {
 	background: 'salmon',
 	width: '100%',
 	padding: 20,
-	color: 'white'
+	color: 'white',
+	height: '100%'
 }
 
 const customSeeMore = {

diff --git a/example/src/index.ejs b/example/src/index.ejs
@@ -2,6 +2,7 @@
 <html>
 
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>react-insta-stories</title>
     <link rel="shortcut icon" type="image/ico" href="/ris.ico" />
     <link href="https://fonts.googleapis.com/css?family=Karla|Source+Code+Pro&display=swap" rel="stylesheet">

diff --git a/src/interfaces.tsx b/src/interfaces.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 
 export interface ReactInstaStoriesProps {
     stories: Story[];
-    width?: number;
-    height?: number;
+    width?: NumberOrString;
+    height?: NumberOrString;
     loader?: JSX.Element;
     header?: Function;
     storyStyles?: Object;
@@ -22,8 +22,8 @@ export interface ReactInstaStoriesProps {
 }
 
 export interface GlobalCtx {
-    width?: number;
-    height?: number;
+    width?: NumberOrString;
+    height?: NumberOrString;
     loader?: JSX.Element;
     header?: Function;
     storyStyles?: Object;
@@ -41,6 +41,8 @@ export interface GlobalCtx {
     keyboardNavigation?: boolean;
 }
 
+type NumberOrString = number | string;
+
 export interface StoriesContext {
     stories: Story[];
 }
@@ -58,8 +60,8 @@ export interface Renderer extends React.FC<{
     isPaused: boolean;
     story: Story;
     config: {
-        width?: number;
-        height?: number;
+        width?: NumberOrString;
+        height?: NumberOrString;
         loader?: JSX.Element;
         header?: Function;
         storyStyles?: Object;