Pip install dash-insta-stories

Make Dash the next Instagram or Snapchat with a pip install dash-insta-stories. This nifty package allows you the famous functionality thats made both of these applications addictive and popular with a DashInstaStories component!
9F362880-691D-4847-94D5-BA7A95C1B413-ezgif.com-optimize

Check out the repository here (:star:): GitHub - pip-install-python/dash_insta_stories: React Insta Stories for dash

Based on: GitHub - mohitk05/react-insta-stories: A React component for Instagram like stories

Here stories is an array of story objects, which can be of various types as described below.

Props

Property Type Default Description
stories [String/Object] required An array of image urls or array of story objects (options described below)
renderers :zap: [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.
progressContainerStyles Object {} Styles object for the container wrapping the progress bars
progressWrapperStyles Object {} Styles object for the container wrapping each progress bar bars
progressStyles Object {} Styles object for the progress bars
loop Boolean false The last story loop to the first one and restart the stories.
New props :star: :star: :star:
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
onNext Function - Callback when the user taps/press to proceed to the next story
onPrevious Function - Callback when the user taps/press to go back to the previous story
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
preventDefault Boolean false Disable the default behavior when user click the component
preloadCount number 1 Determines how many stories should be preloaded ahead of the current story index.

Story object

Instead of simple string url, a comprehensive ‘story object’ can also be passed in the stories array.

Property Description
url The url of the resource, be it image or video.
type Optional. Type of the story. `type: ‘video’
duration Optional. Duration for which a story should persist.
header Optional. Adds a header on the top. Object with heading, subheading and profileImage properties.
seeMore Optional. Adds a see more icon at the bottom of the story. On clicking, opens up this component. (v2: updated to Function instead of element)
seeMoreCollapsed Optional. Send custom component to be rendered instead of the default ‘See More’ text.
styles Optional. Override the default story styles mentioned below.
preloadResource Optional. Whether to preload the resource or not, defaults to true for images and false for videos (video preloading is experimental)

Example Code:

import dash_insta_stories
from dash import *

app = Dash(__name__)

# Define your stories
stories = [
    {
        "url": "https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg",
        "type": "image",
        "duration": 5000,
        "header": {
            "heading": "Colorize lizard",
            "subheading": "Cute isn't he?",
            "profileImage": "https://sea2.discourse-cdn.com/business7/user_avatar/community.plotly.com/pipinstallpython/288/27532_2.png"
        },
        # "seeMore": lambda: {"url": "https://example.com"},
        "styles": {"background": "#f5f5f5"},
        "preloadResource": True
    },
    {
        "url": "https://www.simplilearn.com/ice9/free_resources_article_thumb/what_is_image_Processing.jpg",
        "header": {
            "heading": "I see all",
            "subheading": "👀",
            "profileImage": "https://sea2.discourse-cdn.com/business7/user_avatar/community.plotly.com/pipinstallpython/288/27532_2.png"
        }
    },
{
        "url": "https://www.adobe.com/products/media_14562ad96c12a2f3030725ae81bd3ede1c68cb783.jpeg?width=750&format=jpeg&optimize=medium",
        "header": {
            "heading": "backster",
            "subheading": "puppies with sweaters",
            "profileImage": "https://sea2.discourse-cdn.com/business7/user_avatar/community.plotly.com/pipinstallpython/288/27532_2.png"
        }
    }
    # Add more stories as needed
]

app.layout = html.Div([
    dash_insta_stories.DashInstaStories(
        id='input',
        stories=stories,  # Pass the stories to DashInstaStories
        renderers=[],  # Pass the renderers to DashInstaStories
        defaultInterval=2200,  # Pass the defaultInterval to DashInstaStories
        loader=None,  # Pass the loader to DashInstaStories
        header=None,  # Pass the header to DashInstaStories
        storyContainerStyles={},  # Pass the storyContainerStyles to DashInstaStories
        width=360,  # Pass the width to DashInstaStories
        height=640,  # Pass the height to DashInstaStories
        storyStyles={},  # Pass the storyStyles to DashInstaStories
        progressContainerStyles={},  # Pass the progressContainerStyles to DashInstaStories
        progressWrapperStyles={},  # Pass the progressWrapperStyles to DashInstaStories
        progressStyles={},  # Pass the progressStyles to DashInstaStories
        loop=True,  # Pass the loop to DashInstaStories
        isPaused=False,  # Pass the isPaused to DashInstaStories
        currentIndex=None,  # Pass the currentIndex to DashInstaStories
        # onStoryStart=None,  # Pass the onStoryStart to DashInstaStories
        # onStoryEnd=None,  # Pass the onStoryEnd to DashInstaStories
        # onAllStoriesEnd=None,  # Pass the onAllStoriesEnd to DashInstaStories
        # onNext=None,  # Pass the onNext to DashInstaStories
        # onPrevious=None,  # Pass the onPrevious to DashInstaStories
        keyboardNavigation=True,  # Pass the keyboardNavigation to DashInstaStories
        preventDefault=False,  # Pass the preventDefault to DashInstaStories
        preloadCount=1,  # Pass the preloadCount to DashInstaStories
    ),
])

if __name__ == '__main__':
    app.run_server(debug=True, port='4011')

Pip Install Python GitHub stats
Downloads
Also if you like this project check out my other dash packages I’ve built:

  1. full-calendar-component: Pip install full-calendar-component - #8 by PipInstallPython

  2. dash-summernote: Pip install dash-summernote - #2 by AnnMarieW

  3. dash-swiper: Pip install dash-swiper

  4. dash-emoji-mart: Pip install dash-emoji-mart

2 Likes

What an awesome component, @PipInstallPython
If someone wanted to read more about each dash_insta_stories property, is there a doc outside this forum that goes over that? I couldn’t find it in the repo.

Also, I’m assuming the isPaused prop is triggered when one hovers over the image and pauses the story. I tried that but the property always equaled False. Did I not incorporate it into the callback correctly? I added this callback at the end of your example code above.

@callback(
    Output('non','children'),
    Input('input','isPaused')
)
def update_call(paused):
    print(paused)
    return no_update

isPaused isn’t for pausing story on mouse hover but relating to mouse click. Basically with your click on the story and the code:

app.layout = html.Div([
    dash_insta_stories.DashInstaStories(
        id='input',
        stories=stories,  # Pass the stories to DashInstaStories
        renderers=[],  # Pass the renderers to DashInstaStories
        defaultInterval=2200,  # Pass the defaultInterval to DashInstaStories
        loader=None,  # Pass the loader to DashInstaStories
        header=None,  # Pass the header to DashInstaStories
        storyContainerStyles={},  # Pass the storyContainerStyles to DashInstaStories
        width=360,  # Pass the width to DashInstaStories
        height=640,  # Pass the height to DashInstaStories
        storyStyles={},  # Pass the storyStyles to DashInstaStories
        progressContainerStyles={},  # Pass the progressContainerStyles to DashInstaStories
        progressWrapperStyles={},  # Pass the progressWrapperStyles to DashInstaStories
        progressStyles={},  # Pass the progressStyles to DashInstaStories
        loop=True,  # Pass the loop to DashInstaStories
        isPaused=False,  # Pass the isPaused to DashInstaStories
        currentIndex=None,  # Pass the currentIndex to DashInstaStories
        # onStoryStart=None,  # Pass the onStoryStart to DashInstaStories
        # onStoryEnd=None,  # Pass the onStoryEnd to DashInstaStories
        # onAllStoriesEnd=None,  # Pass the onAllStoriesEnd to DashInstaStories
        # onNext=None,  # Pass the onNext to DashInstaStories
        # onPrevious=None,  # Pass the onPrevious to DashInstaStories
        keyboardNavigation=True,  # Pass the keyboardNavigation to DashInstaStories
        preventDefault=False,  # Pass the preventDefault to DashInstaStories
        preloadCount=1,  # Pass the preloadCount to DashInstaStories
    ),
    html.Div(id='non')
])

@callback(
    Output('non','children'),
    Input('input','isPaused')
)
def update_call(paused):
    print(paused)
    return no_update

The story will pause where if you keep all the code the same but change isPaused=True when the story is clicked it will go to the next slide within the story and skips the remainder time you have within you current story that you have clicked.

As for reference documentation: react-insta-stories

or the github for the original project used in building this react-insta-stories:

1 Like