@maggioli-design-system/magma-react

Magma React specific building blocks on top of [@maggioli-design-system/magma](https://www.npmjs.com/package/@maggioli-design-system/magma) components.

npm

Version: 1.6.0

Version published: 6 months ago

Weekly downloads: 265

Maintainers: 3

Weekly downloads

Created: 11 months ago

Source

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

FAQs

What is @maggioli-design-system/magma-react?

Is @maggioli-design-system/magma-react popular?

Is @maggioli-design-system/magma-react well maintained?

Package last updated on 09 Apr 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install