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)
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:
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