chore: update badges + add slide with custom renderer to demo showcase

README.md

@@ -5,6 +5,8 @@
 
 [![](https://img.shields.io/npm/v/@intive-org/react-stories.svg)](https://www.npmjs.com/package/@intive-org/react-stories)
 ![](https://camo.githubusercontent.com/df1fd6655472a008d21057736be3b95a2bced4e9ea6db7c393e7c960a4d9e450/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532302532302546302539462539332541362546302539462539412538302d73656d616e7469632d2d72656c656173652d6531303037392e737667)
+![](https://camo.githubusercontent.com/83d3746e5881c1867665223424263d8e604df233d0a11aae0813e0414d433943/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)
+![](https://img.shields.io/npm/dw/@intive-org/react-stories)
 
 It's a fork from [https://github.com/mohitk05/react-insta-stories](https://github.com/mohitk05/react-insta-stories)
 

example/src/App.css

@@ -4,6 +4,9 @@ body {
 	font-family: sans-serif;
 	background: rgb(170,221,96);
 	background: linear-gradient(152deg, rgba(170,221,96,1) 0%, rgba(2,128,92,1) 45%, rgba(255,153,83,1) 100%);
+	background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
 }
 
 p {

example/src/App.js

@@ -1,5 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import Stories, { WithSeeMore } from '@intive-org/react-stories'
+import {customRenderer} from './custom-renderer'
 import './App.css';
 
 function App() {
@@ -15,6 +16,8 @@ function App() {
 		loop: false
 	})
 
+	const [customRenderers] = useState([customRenderer])
+
 	const updateWebConsole = (...args) =>  {
 		setWebConsole(prev => {
 			prev.unshift(args.join(' '))
@@ -82,6 +85,8 @@ function App() {
 						<img target="_blank" alt="NPM" src="https://img.shields.io/npm/v/@intive-org/react-stories.svg" />
 					</a>
 					<img alt="Semantic Release" src="https://camo.githubusercontent.com/df1fd6655472a008d21057736be3b95a2bced4e9ea6db7c393e7c960a4d9e450/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2532302532302546302539462539332541362546302539462539412538302d73656d616e7469632d2d72656c656173652d6531303037392e737667" />
+					<img alt="MIT" src="https://img.shields.io/github/license/intive/react-stories"/>
+					<img alt="NPM Downloads" src="https://img.shields.io/npm/dt/@intive-org/react-stories"/>
 				</p>
 				<p>
 					Create Instagram like stories on the web using React
@@ -202,8 +207,9 @@ function App() {
 					width={'100%'}
 					height={'100%'}
 					keyboardNavigation
-					defaultInterval={5000}
+					defaultInterval={3000}
 					stories={stories2}
+					renderers={customRenderers}
 					onStoryEnd={(s, st) => updateWebConsole('story with index ' + s +  ' ended')}
 					onAllStoriesEnd={(s, st) => updateWebConsole('all stories ended', s)}
 					onStoryStart={(s, st) => updateWebConsole('story with index ' + s + ' started')}
@@ -240,14 +246,18 @@ const stories2 = [
 		seeMore: ({ close }) => <div style={{ maxWidth: '100%', height: '100%', padding: 40, background: 'white' }}><h2>Just checking the see more feature.</h2><p style={{ textDecoration: 'underline' }} onClick={close}>Go on, close this popup.</p></div>,
 		duration: 5000
 	},
-		{
+	{
 		url: 'https://intive.github.io/react-stories/RW20seconds_2.mp4',
 		type: 'video',
 		header: {
 			heading: 'credits http://www.exit109.com/~dnn/'
 		}
 	},
-		{
+	{
+		type: 'hcVideo',
+		title: 'Using custom renderer.',
+	},
+	{
 		url: 'https://picsum.photos/1080/1920',
 		seeMore: ({ close }) => <div style={{ maxWidth: '100%', height: '100%', padding: 40, background: 'white' }}><h2>Just checking the see more feature.</h2><p style={{ textDecoration: 'underline' }} onClick={close}>Go on, close this popup.</p></div>
 	},

example/src/custom-renderer.js

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from 'react'
+
+
+export const customRenderer = {
+  renderer: ({ story, action, isPaused, config, messageHandler }) => {
+    useEffect(() => {
+      action('play')
+    }, [story])
+    return <p style={{color: 'white', backgroundColor: 'red'}}>
+      <h2>{story.title}</h2>
+    </p>
+  },
+  tester: (story) => {
+    return {
+      condition: story.type === 'hcVideo',
+      priority: 999
+    }
+  }
+}

src/renderers/index.tsx

@@ -0,0 +1,7 @@
+import { RenderersItem } from './../interfaces'
+import image from './Image';
+import video from './Video';
+import defaultRenderer from './Default';
+import autoplayContent from './AutoPlayContent';
+
+export const renderers: RenderersItem[] = [image, video, autoplayContent, defaultRenderer];