Skip to content

Commit

Permalink
Updated version number
Browse files Browse the repository at this point in the history
  • Loading branch information
@mohitk05
mohitk05 committed Oct 6, 2020
1 parent a679316 commit 434af62
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 22 deletions.
35 changes: 18 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,23 +45,24 @@ 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 | 360 | Width of the component in pixels |
| `height` | Number | 640 | Height of the component in pixels |
| `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 |
| 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 | 360 | Width of the component in pixels |
| `height` | Number | 640 | Height of the component in pixels |
| `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
9 changes: 5 additions & 4 deletions example/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ class App extends React.Component {
return (
<div className="App">
<div className="left">
<h2><code><a rel="noopener noreferrer" href="https://www.npmjs.com/package/react-insta-stories" target="_blank">react-insta-stories [v2.1.0]</a></code></h2>
<h2><code><a rel="noopener noreferrer" href="https://www.npmjs.com/package/react-insta-stories" target="_blank">react-insta-stories [v2.1.2]</a></code></h2>
<p>Create Instagram like stories on the web using React</p>
<br />
<code ><span style={{ background: '#eee', padding: 5, paddingLeft: 10, paddingRight: 10, borderRadius: 5, width: 'auto' }}>npm i react-insta-stories</span></code>
Expand All @@ -21,11 +21,12 @@ class App extends React.Component {
<p>◉ Press and hold to pause</p></div>
<br />
<div className="updates">
<p><mark><b>Updates [V2.1.0]</b></mark></p>
<p><mark><b>Updates [V2.1.2]</b></mark></p>
<p>1. Pass in renderers to switch story UI according to certain conditions</p>
<p>2. Internal code structure changed keeping in mind long-term maintainability</p>
<p>3. Community based pluggable renderers possible now</p>
<p>4. Bug fixes</p>
<p>4. Optional keyboard navigation</p>
<p>5. Bug fixes</p>
<p><a href="https://github.com/mohitk05/react-insta-stories/pull/80">Read more here →</a></p>
<br></br>
<p><mark><b>Updates [V2.0.0]</b></mark></p>
Expand Down Expand Up @@ -58,7 +59,7 @@ 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 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>
);
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-insta-stories",
"version": "2.1.1",
"version": "2.1.2",
"description": "A React component for Instagram like stories",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down

1 comment on commit 434af62

@vercel
Copy link

@vercel vercel bot commented on 434af62 Oct 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.