This project is a fork from mohitk05's stories, and it was only created to implement the functionality of clickable components.

Please keep updated on the original one.

Install

npm install --save react-stories-components

Demo

The component responds to actions like tap on right side for next story, on left for previous and tap and hold for pause. Custom time duration for each story can be provided.

clickable doesn't respond to actions like a tap on the right-left side for the next-previous story. Therefore you should useNavigationBar: true to enable it.

See it in action here

New features v. 1.0.2

Props

| Property | Type | Default | Description | | -------------------- | --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | New props | ⭐️ | ⭐️ | ⭐️ | | automatic (Stories component) | Boolean | true | Toggle stories autoplaying state | | onStoryChange (Stories component) | Event |(prev, current, next) => { } | It is triggered every time the displayed story change, either manually, keyboardNavigation or automatic. | | hideStoryProgress (story object) | Boolean | false | Hide to top progress indicator, useful when a custom nav is added, take a peek at the preview| | preventChangeSideTapped (story object) | Boolean | false | Disable going to prev/next story when you are tapping the left-right side.|

Features v. 1.0.1

Story object props

| Property | Description | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | | New props on this fork | ⭐️ | |clickable | Optional. Allow the content:({action,isPaused}) children elements to be clickeable. As a side-effect story won't pass to next-previous on touch right-leftt | stopOnClick | Optional. If it true, the story will stop when the children elements are tapped/clicked | onStoryClicked | Optional. Fires when an element is/clicked tapped. params (currentId, story, e.target)

Documentation

API documentation available here.

Example

Look at the gif example code here.

License

MIT © davidramos-om