
-
nanostores
A tiny (286 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:
-
SurveyJS
JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Keep full control over the data you collect and tailor the form builder’s entire look and feel to your users’ needs. SurveyJS works with React, Angular, Vue 3, and is compatible with any backend or auth system. Learn more.
-
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
-
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:
-
Stream
Stream - Scalable APIs for Chat, Feeds, Moderation, & Video. Stream helps developers build engaging apps that scale to millions with performant and flexible Chat, Feeds, Moderation, and Video APIs and SDKs powered by a global edge network and enterprise-grade infrastructure.
-
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
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: http://github.com/mui/material-ui.
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); --- + + + + + + + + +
-
Related posts
-
The Ultimate Comparison: Ant Design vs Material# Ant Design vs Material UI: Which React UI Library to Choose
-
MUI finally adds "use client" to their components, but...
-
React and Vite - Why is still loading other component not imported
-
Please Grill Me On My React "Take Home Assessment"
-
MUI start prepending "use client" to their code