Dash Grocery Components 🎇

Hi Community,

I just released a Dash component that wraps some interesting React components. This package currently includes lazy loading, particles, QR codes and weather components. Welcome to try it out, send issues and PRs.

Installation:

pip install dash-grocery

LazyLoad:

import dash_grocery
from dash import html, dcc, Dash
import plotly.express as px

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species")

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                dash_grocery.LazyLoad(
                    html.Img(
                        src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/cat-eyes-cute.jpg",
                        height=300,
                    ),
                    throttle=200,
                    height=300,
                ),
                dash_grocery.LazyLoad(dcc.Graph(figure=fig), throttle=200, height=300),
            ]
        )
        for i in range(10)
    ],
)


if __name__ == "__main__":
    app.run_server(debug=True)

dash-3

Particles:

import dash_grocery
from dash import html, dcc, Dash

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.MouseParticles(),
        dash_grocery.ParticlesBg(),
        dash_grocery.PowerModeInput(
            style=dict(
                position="absolute",
                top="50%",
                left="50%",
                transform="translateX(-50%) translateY(-50%)",
            )
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

dash-1
dash-2

import dash_grocery
from dash import html, dcc, Dash

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.QRCodeCanvas(value="https://plotly.com/"),
        dash_grocery.QRCodeSVG(value="https://github.com/"),
        dash_grocery.Barcode(value=5901234123457, format="EAN13", displayValue=True),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Weather:

dw

Clock:

import dash_grocery
from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div(
    [
        dash_grocery.Textfit(
            dash_grocery.Clock(format="dddd, MMMM Mo, YY, HH:mm:ss", ticking=True),
            max=400,
            mode="single",
        )
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)

dash_clock

PyPI Latest Release
This is an initial version, I haven’t made the documentation yet. :yum:

Hope you like this. XD

5 Likes

Great collection!!

3 Likes

Great stuff!

2 Likes

yessir

3 Likes

How is my greedy snake playing?

dash_snake

import dash_grocery
from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div(
    dash_grocery.Snake(color1="black", color2="tomato", backgroundColor="darkgrey")
)


if __name__ == "__main__":
    app.run_server(debug=True)
2 Likes

Well done mate! Amazing stuff to integrate… all pumped up to use lazy loading!!