Dash Grocery Components 🎇

[stu]

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.

GitHub - IcToxi/dash-grocery: Dash Grocery is a Dash component library...

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)

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)

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:

Daily Tips - Convert a React Component to Dash

Hi there, You know, they said that the entire React ecosystem can be used in Dash applications, right? Today we’re going to try converting or wrapping a React component to dash. Look at the result first. [dw] Yes, it’s a weather component. I found it at random. With the selected components to be converted, let’s do it step by step from the official docs. We need nodejs and cookiecutter. And the plotly team has prepared a template for us. cookiecutter https://github.com/plotl…

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)

This is an initial version, I haven’t made the documentation yet.

Hope you like this. XD

[chriddyp]

Great collection!!

[double12]

Great stuff!

[taylorsegell]

[stu]

How is my greedy snake playing?

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)

[ramyasree]

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