Where is the Masthead Component? #249
Comments
|
Masthead component seats in the web component library under SGDS.
import SgdsMasthead from "@govtechsg/sgds-web-component/react/masthead/index.js"
const GovernmentBanner = () => (
return <SgdsMasthead></SgdsMasthead>
);
export default GovernmentBanner;For more information on the library : https://www.webcomponent.designsystem.tech.gov.sg/?path=/story/getting-started-introduction--page Masthead Documentation: https://www.webcomponent.designsystem.tech.gov.sg/?path=/docs/components-masthead--basic |
|
I think the readme of https://github.com/GovTechSG/sgds-masthead/tree/master should include a link to this post, if this post is not pinned. There probably are quite a few projects still using the old masthead (~540 download this week), and the migration steps is not really straightforward imo. I was running into an issue where importing the A way to resolve this is to create a client component that wraps the // _components/masthead.tsx
'use client'
import dynamic from 'next/dynamic';
const SgdsMasthead = dynamic(() => import('@govtechsg/sgds-web-component/react/masthead/index.js'), {
ssr: false,
});
export default SgdsMasthead;// layout.tsx
import "~/styles/globals.css";
import { GeistSans } from "geist/font/sans";
import { type Metadata } from "next";
import { TRPCReactProvider } from "~/trpc/react";
import SgdsMasthead from "./_components/masthead"
export const metadata: Metadata = {
title: "Create T3 App",
description: "Generated by create-t3-app",
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`${GeistSans.variable}`}>
<body>
<SgdsMasthead />
<TRPCReactProvider>{children}</TRPCReactProvider>
</body>
</html>
);
} |
|
pinned! https://github.com/GovTechSG/sgds-masthead/issues @soedar yup nextjs usage with web component has another level of complexity because web components cant be server rendered. The documentation about nextjs and web components is here. Another way is to load it via Script to make it fully client We have also just released v2 of web components, do check it out! Migration guide here |
|
Awesome! Congrats on the release! |
Prerequisites
Describe the issue
I have looked through storybook documentation and cannot find the Masthead or Official Government Banner from
govtechsg/sgds-reactlibrary.What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
Describe your frontend stack. What version of React and @govtechsg/sgds-react are you using? CSR or SSR?
React v2.5.2
The text was updated successfully, but these errors were encountered: