React js change meta tags dynamically-CodePudding

I have two flow of my application one is user side the other is admin side. My user side is responsive so i want meta tag to say <meta name="viewport" content="width=device-width, initial-scale=1" /> and my admin side is not responsive so i want to enforce browser to open in desktop mode which requires this meta tag to be like this <meta name="viewport" content="width=1024" />

I am using react-document-meta with the following objects

const metaUser = {
  title: "User meta tags",
  description: "Basically make the application responsive when on user side",
  meta: {
    name: { keywords: "viewport" },
    content: "width=device-width, initial-scale=1",
  },
};
const metaAdmin = {
  title: "Admin meta tags",
  description: "Make the application default in desktop mode",
  meta: {
    name: { keywords: "viewport" },
    content: "width=1024",
  },
};

but it creates new meta on the head tag and those tags doesn't work

CodePudding user response：

I suggest using react-helmet.

You can install it using the npm command: npm i react-helmet

And then import in in your component/page:

import {Helmet} from "react-helmet";

And use all your tags inside the Helmet component, which you would put inside the regular head tag in html, with the syntax of jsx


    <Helmet>
        <title>{`${admin ? "Admin Title" : "Client Title"}`}</title>
        <meta name="description" content={`${admin ? "Admin Content" : "Client Content"}`} />
    </Helmet>