Pip install dash-insta-stories 🐇

PipInstallPython · April 3, 2024, 7:59pm

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 (): 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`	[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
`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/flex020/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/flex020/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/flex020/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')

Also if you like this project check out my other dash packages I’ve built:

full-calendar-component: Pip install full-calendar-component 📅 - #8 by PipInstallPython
dash-summernote: Pip install dash-summernote 📝 - #2 by AnnMarieW
dash-swiper: Pip install dash-swiper
dash-emoji-mart: Pip install dash-emoji-mart 😀

adamschroeder · April 4, 2024, 2:04pm

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

PipInstallPython · April 4, 2024, 5:45pm

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:

Topic		Replies	Views
Show and Tell - Dash Code Editor Dash Python show-and-tell	6	2707	November 5, 2019
How to Create Custom Plotly Dash Components Using JavaScript & React \| Step-by-Step Tutorial 🚀 Dash Python show-and-tell , community-components , tips-and-tricks	0	197	October 27, 2024
Pip Install Dash-Image-Gallery 🏞️ Dash Python show-and-tell , community-components	0	405	April 12, 2024
Show and Tell: Pip Install Python September Update Dash Python show-and-tell	2	61	September 20, 2024
Show and Tell - Download Component Dash Python show-and-tell	14	7437	October 28, 2020

Pip install dash-insta-stories 🐇

Props

Story object

Related topics