@maggioli-design-system/magma-react NPM

MagmaReact

Magma React specific building blocks on top of @maggioli-design-system/magma components.

Installation

Install package

npm i @maggioli-design-system/magma-react

Icon

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>
  );
}

Usage Example

import { MdsText } from '@maggioli-design-system/magma-react'


export default function Component() {
  return (
    <MdsText typography="h3">Hello World</MdsText>
  );
}

@maggioli-design-system/magma @stencil/react-output-target

10 months ago

10 months ago

11 months ago

12 months ago

12 months ago