react-helmet#Helmet JavaScript Examples

The following examples show how to use react-helmet#Helmet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: RootLayout.jsx    From gatsby-starter-builder with MIT License 6 votes vote down vote up 
export default function RootLayout(props) {
  return (
    <React.Fragment>
      <Helmet>
        <meta charSet="UTF-8" />
        <meta name="theme-color" content="#f8f8f8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no"
        />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
      </Helmet>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        {props.children}
      </ThemeProvider>
    </React.Fragment>
  );
}
Example #2
Source File: index.js    From Easy-Annotator with GNU General Public License v3.0 6 votes vote down vote up 
function index() {
  return (
    <div>
      <Helmet>
        <meta charSet="utf-8" />
        <title>EasyAnnotator</title>
      </Helmet>
      <Index />
    </div>
  );
}
Example #3
Source File: LogoutPage.js    From app with MIT License 6 votes vote down vote up 
function LogoutPage() {
  const classes = useStyles();
  const auth = useAuth();
  const history = useHistory();

  useEffect(() => {
    auth.signOut().then(() => {
      history.replace('/');
    });
  }, [auth, history]);

  return (
    <Container maxWidth="md">
      <Helmet>
        <title>Logging Out</title>
      </Helmet>
      <Paper className={classes.paper}>
        <Typography
          variant="h5"
          align="center"
          color="textPrimary"
          gutterBottom>
          Logging out...
        </Typography>
        <LinearProgress />
      </Paper>
    </Container>
  );
}
Example #4
Source File: PatchNote.js    From ponce-tournois-mario-kart with MIT License 6 votes vote down vote up 
function PatchNote({ patchNote }) {
    return (
        <Row justify="center">
            <Helmet>
                <title>Patch note {patchNote.version}</title>
            </Helmet>

            <Col xs={12} lg={8}>
                <Row justify="end">
                    <Col xs="content">
                        <Link
                            to={`/admin/patch-notes/${patchNote.id}/edit`}
                            className="btnPrimary"
                        >
                            Modifier
                        </Link>
                    </Col>
                </Row>

                <h1 className="patchNote__title">
                    Patch note {patchNote.version}
                </h1>

                <div className="patchNote__preview">
                    <Markdown>{patchNote.content}</Markdown>
                </div>
            </Col>
        </Row>
    );
}
Example #5
Source File: OGURL.js    From codeursenseine.com with MIT License 6 votes vote down vote up 
OgUrl = ({ path }) => (
  <Helmet
    meta={[
      {
        property: `og:url`,
        content: `${process.env.GATSBY_ORIGIN}${path}`,
      },
    ]}
  />
)
Example #6
Source File: index.jsx    From roomie-frontend with MIT License 6 votes vote down vote up 
Layout = ({ title = '', description, children }) => {
  return (
    <>
      <Helmet>
        <title>
          {`? Roomeate | ${title}`}
        </title>
        <meta name='description' content={description} />
        <link rel='icon' href={favicon} type='image/x-icon' sizes='32x32' />
        <link href='https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap' rel='stylesheet' />
        <link rel='stylesheet' href='https://raw.githubusercontent.com/JoseCrz/toastify/master/toastify.css' />
      </Helmet>
      <Header />

      { children }

      <Footer />
    </>
  );
}
Example #7
Source File: AboutPage.jsx    From eos-icons-landing with MIT License 6 votes vote down vote up 
AboutPage = () => {
  useEffect(() => {
    scrollToTop()
  })

  return (
    <>
      <Helmet>
        <title>About Us | EOS Icons</title>
        <meta
          name='description'
          content='Commercial, non-commercial, use them as you please. EOS icons comes with an MIT license, has an open source community, and welcomes your collaboration too.'
        />
        <meta
          name='keywords'
          content='open source icon, ligature icon, action icon, animated icon, ai icon, design icon'
        />
      </Helmet>

      <PageHeader simple showHeaderIcon={false}>
        <h1>THE HI-TECH ICONS nobody thought about</h1>
        <p className='subheadline'>
          Open source, customisable, including all of Material icons.
        </p>

        <DownloadEOSicons />
      </PageHeader>
      <div className='container'>
        {data.map((ele, i) => {
          return <AboutBlock {...ele} key={i} />
        })}

        <UsedBy />
      </div>
    </>
  )
}
Example #8
Source File: index.js    From official-website-backend with MIT License 6 votes vote down vote up 
// import { isMouseMoveEvent } from "react-multi-carousel";

function BlogsPage() {
  const style = {
    backgroundImage: `url(${bg_blogs})`,
  };

  return (
    <>
      <div className="page-component" style={style}>
        <Helmet>
          <title>Energia Powered | Blogs</title>
        </Helmet>
        <Layout>
          <HeaderForBlogs />
          <BlogList />
        </Layout>
      </div>
    </>
  );
}
Example #9
Source File: Page.js    From flame-coach-web with MIT License 6 votes vote down vote up 
Page = React.forwardRef(({
  isError,
  isLoading,
  title,
  children,
  ...rest
}, ref) => {
  const classes = useStyles();

  let elem = <Loading size={100} />;

  if (!isLoading) {
    if (!isError) {
      elem = children;
    } else {
      elem = <Warning message={process.env.NEXT_PUBLIC_MSG_SERVER_ERROR} />;
    }
  }

  return (
    <div
      className={classes.root}
      ref={ref}
      {...rest}
    >
      <Helmet>
        <title>{title}</title>
      </Helmet>
      <Container
        className={classes.container}
        maxWidth={false}
      >
        {elem}
      </Container>
    </div>
  );
})
Example #10
Source File: index.js    From Official-Website with MIT License 6 votes vote down vote up 
render() {
    const { blogs, isLoading } = this.state;
    return (
      <>
        <Helmet>
          <title>Blog | IEEE Al-Azhar Student Branch</title>
        </Helmet>
        <h1 className={`${styles.blogs__heading} text-center mb-5`}>Blog</h1>
        <div className="container">
          <section className={styles["blogs_filtration"]}>
            <SearchFilter searchCategories={this.handelSearch} />
            <CategoriesFilter filterCategories={this.handelFiltration} />
          </section>
          <div className="row">
            <section className={`col-lg-8 ${styles.blogs__list}`}>
              {isLoading ? (
                <Loading title="Loading Events ..." />
              ) : blogs.length > 0 ? (
                blogs.map((blog) => <BlogCard key={blog._id} data={blog} />)
              ) : (
                <p className="d-flex justify-content-center">
                  No Articles found
                </p>
              )}
            </section>
          </div>
        </div>
      </>
    );
  }
Example #11
Source File: layout.js    From guitar-book with MIT License 6 votes vote down vote up 
export default function Layout(props) {
  return (
    <StaticQuery
      query={graphql`
        {
          site {
            siteMetadata {
              title
              description
            }
          }
        }
      `}
      render={data => {
        const {title, description} = data.site.siteMetadata;
        return (
          <Fragment>
            <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`}>
              <meta name="description" content={description} />
            </Helmet>
            {props.children}
          </Fragment>
        );
      }}
    />
  );
}
Example #12
Source File: seo.jsx    From markdown-dungeon with MIT License 6 votes vote down vote up 
export default function Seo({ title, description, image, article }) {
  const { pathname } = useLocation();
  const { site } = useStaticQuery(query);
  const {
    defaultTitle,
    defaultDescription,
    siteUrl,
    defaultImage,
  } = site.siteMetadata;
  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`,
    url: `${siteUrl}${pathname}`,
  };
  return (
    <Helmet title={seo.title}>
      <meta name='title' content={seo.title} />
      <meta name='description' content={seo.description} />
      <meta name='image' content={seo.image} />
      {seo.url && <meta property='og:url' content={seo.url} />}
      {(article ? true : null) && <meta property='og:type' content='article' />}
      {seo.title && <meta property='og:title' content={seo.title} />}
      {seo.description && (
        <meta property='og:description' content={seo.description} />
      )}
      {seo.image && <meta property='og:image' content={seo.image} />}
      <meta name='twitter:card' content='summary_large_image' />
      {seo.title && <meta name='twitter:title' content={seo.title} />}
      {seo.description && (
        <meta name='twitter:description' content={seo.description} />
      )}
      {seo.image && <meta name='twitter:image' content={seo.image} />}
    </Helmet>
  );
}
Example #13
Source File: RootLayout.jsx    From oberion with MIT License 6 votes vote down vote up 
RootLayout = ({ children }) => {
  return (
    <>
      <Helmet>
        <meta name="viewport"
              content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
        <link rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Roboto:400&display=swap" />
        <link rel="stylesheet"
              href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" />

      </Helmet>
      {children}
    </>
  );
}
Example #14
Source File: Seo.js    From new_sommelier_website with MIT License 6 votes vote down vote up 
function SEO({ description, title, image, content }) {
 
 
   const metaDescription = "Sommelier is the new Coprocessor for the Ethereum VM";
   const defaultTitle = "Sommelier";
 
 
   let metaImage = image;
 
 
   return (
     <Helmet>
       <title>{defaultTitle}</title>
       <meta name="description" content={metaDescription} />
       {metaImage && <meta name="image" content={metaImage} />}
 
       <meta property="og:type" content="website" />
       <meta property="og:title" content={defaultTitle} />
       <meta property="og:description" content={metaDescription} /> 
       {metaImage && <meta property="og:image" content={metaImage} />}
 
       <meta name="twitter:title" content={defaultTitle} />
       <meta name="twitter:description" content={description} />
       {metaImage && <meta name="twitter:image" content={metaImage} />}
     </Helmet>
   )
 }
Example #15
Source File: IntegrationDetailBanner.js    From agility-website-gatsby with MIT License 6 votes vote down vote up 
HasImg = ({ img, isHomePage, page }) => {

	const [isLoaded, setIsLoaded] = useState(false)

	// const dataLayerList = [layer0, layer1, layer2, layer3, layer4]
	// let listLottieOptions = []

	// for (let i = 0; i < 5; i++) {
	// 	let opts = {
	// 		loop: false,
	// 		autoplay: isLoaded,
	// 		// animationData: dataLayerList[i],
	// 		path: `/js/layer_${i}.json`,
	// 		rendererSettings: {
	// 			preserveAspectRatio: 'xMidYMid slice'
	// 		}
	// 	}
	// 	listLottieOptions.push(opts)
	// }

	useEffect(() => {
		setIsLoaded(true)
	}, [])


	return (
		<React.Fragment>
				<Helmet>
					<link rel="preload" as="image" href={img.url} media="screen" />
				</Helmet>
			<img
				src={img.url}
				// width={ !isLoaded ? '320' : '' }
				// height={ !isLoaded ? '208' : '' }
				alt={img.label ? img.label : 'image video'} className='anima-right' />

		</React.Fragment>
	)
}
Example #16
Source File: blog.js    From website with MIT License 6 votes vote down vote up 
render() {
    const { data } = this.props
    const posts = data.allFile.edges
    return (
      <Layout>
        <Helmet>
          <meta charSet="utf-8" />
          <title>Blog - Static analysis tools, linters, code quality</title>
        </Helmet>
        {posts.map(({ node }) => {
          const title =
            node.childMarkdownRemark.frontmatter.title ||
            node.childMarkdownRemark.fields.slug
          return (
            <div key={node.childMarkdownRemark.fields.slug}>
              <article tw="flex flex-col shadow my-4">
                <div tw="bg-white flex flex-col justify-start p-6">
                  <h1 tw="text-xl font-semibold pb-5">
                    <Link to={node.childMarkdownRemark.fields.slug}>
                      {title}
                    </Link>
                  </h1>
                  <small>{node.childMarkdownRemark.frontmatter.date}</small>
                  <p
                    dangerouslySetInnerHTML={{
                      __html: node.childMarkdownRemark.excerpt,
                    }}
                  />
                </div>
              </article>
            </div>
          )
        })}
      </Layout>
    )
  }
Example #17
Source File: SEO.js    From livecovid.in-webapp with MIT License 6 votes vote down vote up 
HelmetDefault = (props) => (
  <Helmet>
    <title itemProp="name" lang="en">
      {props.title}
      {' '}
      | Live Coronavirus Tracker India State-wise, District-wise
    </title>
    <meta
      name="description"
      content="Dashboard to track the spread of Coronavirus (COVID-19) in India, contains state-wise, district-wise live updates"
    />
    <meta
      name="keywords"
      content="coronavirus,corona,covid,covid19,covid-19,covidindia,india,virus"
    />
  </Helmet>
)
Example #18
Source File: tags.js    From anmolsingh.me with MIT License 6 votes vote down vote up 
TagsPage = ({
  data: {
    allMarkdownRemark: { group },
    site: {
      siteMetadata: { title },
    },
  },
  location,
}) => (
  <Layout location={location}>
    <Helmet title={title} />

    <StyledTagsContainer>
      <span className="breadcrumb">
        <span className="arrow">&larr;</span>
        <Link to="/pensieve">All memories</Link>
      </span>

      <h1>Tags</h1>
      <ul className="fancy-list">
        {group.map(tag => (
          <li key={tag.fieldValue}>
            <Link to={`/pensieve/tags/${kebabCase(tag.fieldValue)}/`}>
              {tag.fieldValue} <span className="count">({tag.totalCount})</span>
            </Link>
          </li>
        ))}
      </ul>
    </StyledTagsContainer>
  </Layout>
)
Example #19
Source File: SeoHeader.js    From masterPortfolio with MIT License 6 votes vote down vote up 
function SeoHeader() {
  return (
    <Helmet>
      <title>{seo.title}</title>
      <meta name="description" content={seo.description} />
      <meta property="og:title" content={seo?.og?.title} />
      <meta property="og:type" content={seo?.og?.type} />
      <meta property="og:url" content={seo?.og?.url} />
    </Helmet>
  );
}
Example #20
Source File: index.js    From auro-wallet-browser-extension with Apache License 2.0 6 votes vote down vote up 
render() {
    return (
      <div>
         <Helmet>
                <meta charSet="utf-8" />
                <title>{getLanguage("ledgerConnect")}</title>
                <link rel="canonical" href="./popup.html#/ledger_connect" />
            </Helmet>
        <div className="ledger-connect-container">
          {
            this.state.connectCompleted ?
            <LedgerConnected tips={['back2extension', 'dontclose']}/> :
            this.renderSteps()
          }
        </div>
        {!this.state.connectCompleted && this.renderBottonBtn()}
      </div>)
  }
Example #21
Source File: Dashboard.js    From crate with MIT License 6 votes vote down vote up 
Dashboard = () => (
  <div>
    {/* SEO */}
    <Helmet>
      <title>Dashboard - Admin - Crate</title>
    </Helmet>

    {/* Top menu bar */}
    <AdminMenu/>

    {/* Page Content */}
    <Grid style={{ padding: '2em' }}>
      <GridCell>
        <p style={{ textAlign: 'center', color: grey3 }}>Nothing here yet. Choose an item from admin menu.</p>
      </GridCell>
    </Grid>
  </div>
)
Example #22
Source File: SEO.js    From barcadia with MIT License 6 votes vote down vote up 
SEO = ({ title, description }) => {
  const { site } = useStaticQuery(getData)

  const {
    siteDesc,
    siteTitle,
    siteUrl,
    image,
    twitterUsername,
  } = site.siteMetadata
  return (
    <Helmet htmlAttribute={{ lang: "en" }} title={`${title} | ${siteTitle}`}>
      <meta name="description" content={description || siteDesc} />
      <meta name="image" content={image} />
      {/* Facebook Card */}
      <meta property="og:url" content={siteUrl} />
      <meta property="og:type" content="website" />
      <meta property="og:title" content={siteTitle} />
      <meta property="og:description" content={siteDesc} />
      <meta property="og:image" content={`${siteUrl}${image}`} />
      <meta property="og:image" content="400" />
      <meta property="og:image:height" content="300" />

      {/* Twitter Card */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:creator" content={twitterUsername} />
      <meta name="twitter:title" content={siteTitle} />
      <meta name="twitter:description" content={siteDesc} />
      <meta name="twitter:image" content={`${siteUrl}${image}`} />
    </Helmet>
  )
}
Example #23
Source File: head.js    From bartzalewski.com-v2 with MIT License 6 votes vote down vote up 
Head = ({ title }) => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <Helmet
      title={
        title
          ? `${title} - ${data.site.siteMetadata.title}`
          : `${data.site.siteMetadata.title}`
      }
    >
      <meta name="description" content="Bart Zalewski | Full-Stack Developer" />
    </Helmet>
  )
}
Example #24
Source File: BuyPage.js    From bonded-stablecoin-ui with MIT License 6 votes vote down vote up 
BuyPage = () => {
  const { pendingExchanges, exchanges } = useSelector(
    (state) => state.settings
  );
  const current = exchanges.find((p) => p.id === pendingExchanges);
  const { t } = useTranslation();

  return (
    <div>
      <Helmet title="Bonded stablecoins - Buy interest tokens" />
      <Title level={1}>{t("buy.title_btc", "Buy interest tokens with BTC")}</Title>
      <Text type="secondary">
        {t("buy.desc_v2", "Buy interest earning tokens (IUSD, IBIT, etc) for BTC in one easy step.")}
      </Text>
      {pendingExchanges && current ? (
        <ExchangeView current={current} />
      ) : (
        <ExchangeForm />
      )}

      <ExchangeList />
    </div>
  );
}
Example #25
Source File: CSSReset.jsx    From Edlib with GNU General Public License v3.0 6 votes vote down vote up 
CssReset = ({ children, ...props }) => {
    return (
        <Box
            {...props}
            fontFamily="fontFamily"
            className="edlib-components"
            style={{ height: '100%' }}
        >
            <Helmet>
                <link
                    rel="stylesheet"
                    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
                />
            </Helmet>
            <GlobalStyle />
            {children}
        </Box>
    );
}
Example #26
Source File: LanguageSwitcher.js    From chainx.org-v2 with BSD Zero Clause License 6 votes vote down vote up 
render() {

    return (
      <IntlContextConsumer>
        {({ languages, language: currentLocale }) => (
          <div>
            <Helmet>
              <html lang={currentLocale} />
            </Helmet>
            {this.renderLanguageChoice("zh", "简", currentLocale)}
            <span className="lang">/</span>
            {this.renderLanguageChoice("en", "EN", currentLocale)}
          </div>
        )}
      </IntlContextConsumer>
    )
  }
Example #27
Source File: Layout.js    From launchtime-workshop with MIT License 6 votes vote down vote up 
Layout = ({ children, pageName }) => {
  let layoutClass = '';

  if ( pageName ) layoutClass = `${layoutClass} page-${pageName}`;

  return (
    <>
      <Helmet bodyAttributes={{ class: layoutClass }}>
        <title>LaunchTime</title>
      </Helmet>
      <div className="wrapper">
        <Header />
        <main>{ children }</main>
        <Footer />
      </div>
    </>
  );
}
Example #28
Source File: Layout.js    From my-coronavirus-map with MIT License 6 votes vote down vote up 
Layout = ({ children, pageName }) => {
  let className = '';

  if ( pageName ) {
    className = `${className} page-${pageName}`;
  }

  return (
    <>
      <Helmet bodyAttributes={{ class: className }}>
        <title>Gatsby Site</title>
      </Helmet>
      <div className="wrapper">
        <Header />
        <main>{ children }</main>
        <Footer />
      </div>
    </>
  );
}
Example #29
Source File: faq.js    From covid19Nepal-react with MIT License 6 votes vote down vote up 
function FAQ(props) {
  const [faq, setFaq] = useState([]);

  useEffect(() => {
    getFAQs();
  }, []);

  const getFAQs = () => {
    axios
      .get(`https://api.nepalcovid19.org/faq.json`)
      .then((response) => {
        setFaq(response.data.faq);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <div className="FAQ">
      <Helmet>
        <title>FAQ - nepalcovid19.org</title>
        <meta name="title" content="Coronavirus  Tracker in Nepal" />
      </Helmet>
      {faq.map((faq, index) => {
        return (
          <div
            key={index}
            className="faq fadeInUp"
            style={{animationDelay: `${0.5 + index * 0.1}s`}}
          >
            <h2 className="question">{faq.question}</h2>
            <h2 className="answer">{faq.answer}</h2>
          </div>
        );
      })}
    </div>
  );
}