Magma React specific building blocks on top of @maggioli-design-system/magma components.
Install package
npm i @maggioli-design-system/magma-react
Set the path where the mds-icon component will get the svg icons inside UseEffect otherwise window is not defined
// app.js
export default function App({
children,
}) {
useEffect(() => {
sessionStorage.setItem("mdsIconSvgPath", `/svg/`);
}, []);
return <>{children}</>;
}Example using Nextjs with App Router
// client_globals_wrapper.tsx
export default function ClientGlobalsWrapper({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
useEffect(() => {
sessionStorage.setItem("mdsIconSvgPath", `/svg/`);
}, []);
return <>{children}</>;
}// app/layout.tsx
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html>
<body>
<ClientGlobalsWrapper>
<main>{children}</main>
</ClientGlobalsWrapper>
</body>
</html>
);
}import { MdsText } from '@maggioli-design-system/magma-react'
export default function Component() {
return (
<MdsText typography="h3">Hello World</MdsText>
);
}