0
298
ViewsReact js change meta tags dynamically
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
1 answers
Answer question0
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>