Our great sponsors
-
nanostores
A tiny (334 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores
All of these are valid ways of fixing the state management issue, but it's clear that we need to find a common solution that works for all the UI libraries. This is where nanostores comes into play! The description they provide on their GitHub page is simply perfect:
-
react
React integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores (by nanostores)
React (@nanostores/react): provides a useStore() Hook to get the store’s value and re-render the component on store’s changes
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
vue
Vue integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores (by nanostores)
Vue (@nanostores/vue): provides a useStore() composable function to get the store’s value and re-render the component on store’s changes
-
Multi-framework dashboard - GitHub Repository
-
When dealing with npm dependencies in Astro, which is built on top of Vite, that are not previously compiled (converted into JavaScript), we have to specify Vite to the property ssr.noExternal in our Astro configuration, inside the vite attribute. If you want to read more about Externals, please refer to the official documentation.
-
I also installed Tailwind CSS to create most of the layout for the page, with the prefix option of tw- (this is to prevent clashing classes between Tailwind and Vuetify).
-
As I mentioned at the beginning of this article, we’re using Svelte Material UI. To install it in our project, we have to first add it to our dependencies:
-
InfluxDB
Access the most powerful time series database as a service. Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.
-
This is the last integration of this article, and maybe the most fun! A dashboard cannot be considered complete unless we show a chart or diagram to visually display information. For this part of the demo, we’ll use mui for the components and recharts for the graphs.
-
material-ui
MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
React: MUI Core and recharts
-
material-ui-docs
⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository:
This is the last integration of this article, and maybe the most fun! A dashboard cannot be considered complete unless we show a chart or diagram to visually display information. For this part of the demo, we’ll use mui for the components and recharts for the graphs.
-
DummyJSON
DummyJSON.com provides different types of REST Endpoints filled with JSON data which you can use in developing the frontend with your favorite framework and library without worrying about writing a backend.
//src/pages/index.astro --- import Layout from '../layouts/Layout.astro'; import type { Product } from '../types'; import ProductTable from '../components/ProductTable.svelte'; import CategoryTags from '../components/CategoryTags.svelte'; import Overview from '../components/Overview.vue'; import CategoryChart from '../components/CategoryChart'; // fetch data const products: Product[] = await fetch('https://dummyjson.com/products') .then((res) => res.json()) .then((res) => res.products); --- + + + + + + + + +
-
> yarn astro add react vue svelte tailwind ✔ Resolving packages... Astro will run the following command: If you skip this step, you can always run it yourself later ╭─────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ yarn add @astrojs/react @astrojs/svelte @astrojs/tailwind @astrojs/vue @types/[email protected]^18.0.6 │ │ @types/[email protected]^18.0.21 [email protected]^18.0.0 [email protected]^18.0.0 [email protected]^3.46.4 [email protected]^3.0.24 │ │ [email protected]^3.2.30 │ ╰─────────────────────────────────────────────────────────────────────────────────────────────────────╯ ✔ Continue? … yes ✔ Installing dependencies... Astro will generate a minimal ./tailwind.config.cjs file. ✔ Continue? … yes Astro will make the following changes to your config file: ╭ astro.config.mjs ───────────────────────────────────────╮ │ import { defineConfig } from 'astro/config'; │ │ │ │ // https://astro.build/config │ │ import react from "@astrojs/react"; │ │ import vue from "@astrojs/vue"; │ │ import svelte from "@astrojs/svelte"; │ │ import tailwind from "@astrojs/tailwind"; │ │ │ │ // https://astro.build/config │ │ export default defineConfig({ │ │ integrations: [react(), vue(), svelte(), tailwind()] │ │ }); │ ╰─────────────────────────────────────────────────────────╯ ✔ Continue? … yes success Added the following integrations to your project: - @astrojs/react - @astrojs/vue - @astrojs/svelte - @astrojs/tailwind Astro will make the following changes to your tsconfig.json: ╭ tsconfig.json ──────────────────────────╮ │ { │ │ "extends": "astro/tsconfigs/strict", │ │ "compilerOptions": { │ │ "jsx": "react-jsx", │ │ "jsxImportSource": "react" │ │ } │ │ } │ ╰─────────────────────────────────────────╯ ✔ Continue? … yes success Successfully updated TypeScript settings
Related posts
- How are folks previewing their components in 2023?
- How do I tell where the source code of an imported function can be found in the lib's GitHub repo from the import path?
- Server components with component libraries.
- The current state of CSS-in-JS + React
- ⚠️ Warning to people using MUI and have disabled the ripple effect