react-helmet-async Helmet JavaScript Examples

Source File: Content.js From zero-neko with MIT License

7 votes

Content = () => {
    return(
        <>
            <HelmetProvider>
                <Helmet>
                    <title>{GetTitle() + " - Zeroneko"}</title>
                    <link rel="icon" href={logoIconWhite} />
                </Helmet>
            </HelmetProvider>
            <main className="relative m-0 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 pt-8 pb-16">
                <Suspense fallback={<FallbackLoading height="96" marginY="48"/>}>
                    <Switch>
                        {routes.map((route, idx) => {
                        return route.component && (
                            <FancyRoute
                            key={idx}
                            path={route.path}
                            exact={route.exact}
                            name={route.name}
                            render={props => (<route.component {...props} symbol={route.symbol} title={route.name} />)} 
                            />
                        )
                        })}
                    </Switch>
                </Suspense>
            </main>
        </>
    )
}

Source File: SEO.js From basis with MIT License

7 votes

function SEO({ title, description = "Basis Design System" }) {
  return (
    <HelmetProvider>
      <Helmet htmlAttributes={{ lang: "en" }}>
        <title>{title}</title>
        <meta name="description" content={description} />
      </Helmet>
    </HelmetProvider>
  );
}

Source File: index.js From bank-client with MIT License

6 votes

export default function ResetPasswordPage() {
  useInjectReducer({ key: 'resetPasswordPage', reducer });
  useInjectSaga({ key: 'resetPasswordPage', saga });

  const { token } = useParams();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(changeInputAction({ name: 'token', value: token }));
  }, [token]);

  return (
    <>
      <FormattedMessage {...messages.resetPassword}>
        {(title) => <Helmet title={title} />}
      </FormattedMessage>

      <Header />
      <Subheader pageTitle={routes.resetPassword.name} />

      <Information />

      <ResetPasswordForm />

      <Footer />

      <ConstantCookie />
    </>
  );
}

Source File: Charts.jsx From cosmoscan-front with Apache License 2.0

6 votes

Charts = () => (
  <Container>
    <Helmet>
      <title>Cosmos validators charts | Cosmoscan</title>
      <meta
        name="description"
        content="Comparative charts with validator stats."
      />
      <meta
        itemProp="description"
        content="Comparative charts with validator stats."
      />
      <meta
        property="og:description"
        content="Comparative charts with validator stats."
      />
      <meta
        name="twitter:description"
        content="Comparative charts with validator stats."
      />
    </Helmet>

    <Row xs={1} xl={2}>
      <ColMarginStandard>
        <BlocksProposed />
      </ColMarginStandard>
      <ColMarginStandard>
        <Jailed />
      </ColMarginStandard>
      <ColMarginStandard>
        <FeeRanges />
      </ColMarginStandard>
      <ColMarginStandard>
        <Delegators />
      </ColMarginStandard>
    </Row>
  </Container>
)

Source File: Page.js From Django-REST-Framework-React-BoilerPlate with MIT License

6 votes

Page = forwardRef(({ children, title = '', meta, ...other }, ref) => (
  <>
    <Helmet>
      <title>{`${title} | DRF-React BoilerPlate`}</title>
      {meta}
    </Helmet>

    <Box ref={ref} {...other}>
      {children}
    </Box>
  </>
))

Source File: Home.jsx From vitedge with MIT License

6 votes

export default function Home(props) {
  return (
    <>
      <Helmet>
        <html lang="en" />
        <meta charSet="utf-8" />
        <title>Home</title>
        <link rel="canonical" href="http://mysite.com/example" />
      </Helmet>

      <h1>Home</h1>
      <p>{JSON.stringify(props, null, 2)}</p>
    </>
  )
}

Source File: ToolbarBlock.jsx From movies with MIT License

6 votes

function ToolbarBlock(props) {
  const {
    t,
    activeMoviesType,
    changeMoviesType
  } = props;

  return (
    <div className="col-12 col-lg-auto p-0 pr-lg-2">
      <Helmet>
        <title>
          {t(`movie_types.${activeMoviesType}`)}
          {' | Movies'}
        </title>
      </Helmet>

      <div
        className={cn(styles.group, 'btn-group')}
        role="group"
        data-test="movies-filter"
      >
        {TMDB_MOVIES_TYPES.map(
          (item, index) => (
            <FilterButton
              key={index}
              isActive={activeMoviesType === item}
              value={item}
              text={t(`movie_types.${item}`)}
              handler={changeMoviesType}
            />
          )
        )}
      </div>
    </div>
  );
}

Source File: index.js From bank-client with MIT License

6 votes

function ForgetPasswordPage() {
  useInjectReducer({ key: 'forgetPasswordPage', reducer });
  useInjectSaga({ key: 'forgetPasswordPage', saga });

  /* eslint-disable no-unused-vars */
  const { forgetPasswordPage } = useSelector(stateSelector);
  const dispatch = useDispatch();
  /* eslint-enable no-unused-vars */

  return (
    <>
     <FormattedMessage {...messages.forgetPassword}>
        {(title) => <Helmet title={title} />}
      </FormattedMessage>

      <Header />
      <Subheader pageTitle={routes.forgetPassword.name} />

      <Information />

      <ForgotPasswordForm />

      <Footer />

      <ConstantCookie />
    </>
  );
}

Source File: wrapper.js From kollateral with Apache License 2.0

6 votes

Wrapper = ({ children }) => <React.Fragment>
    <Helmet>
        <meta charSet="utf-8" />
        <link rel="icon"
            type="image/png"
              href="https://docs.kollateral.co/public/favicon.png"
        />
        <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet"></link>
    </Helmet>
    {children}
</React.Fragment>

Source File: index.js From bank-client with MIT License

6 votes

export default function SettingsPage() {
  useInjectReducer({ key: 'settingsPage', reducer });
  useInjectSaga({ key: 'settingsPage', saga });

  const { user } = useSelector(stateSelector);

  return (
    <>
      <FormattedMessage {...messages.settings}>
        {(title) => <Helmet title={`${getAlertCount(user)} ${title}`} />}
      </FormattedMessage>

      <SettingsForm />
    </>
  );
}

Source File: index.js From react-portfolio with MIT License

6 votes

Portfolio = () => {
  return (
    <HelmetProvider>
      <Container className="About-header">
        <Helmet>
          <meta charSet="utf-8" />
          <title> Portfolio | {meta.title} </title>{" "}
          <meta name="description" content={meta.description} />
        </Helmet>
        <Row className="mb-5 mt-3">
          <Col lg="8">
            <h1 className="display-4 mb-4"> Portfolio </h1>{" "}
            <hr className="t_border my-4 ml-0 text-left" />
          </Col>
        </Row>
        <div className="mb-5 po_items_ho">
          {dataportfolio.map((data, i) => {
            return (
              <div key={i} className="po_item">
                <img src={data.img} alt="" />
                <div className="content">
                  <p>{data.desctiption}</p>
                  <a href={data.link}>view project</a>
                </div>
              </div>
            );
          })}
        </div>
      </Container>
    </HelmetProvider>
  );
}

Source File: App.jsx From ResoBin with MIT License

6 votes

App = () => {
  const theme = useSelector(selectTheme)
  const authLoading = useSelector(selectAuthLoading)
  usePageTracking()

  return (
    <ThemeProvider theme={themes[theme] ?? themes.dark}>
      <Helmet>
        <title>ResoBin</title>
        <meta
          name="description"
          content="IIT Bombay's resources sharing website"
        />
      </Helmet>
      <GlobalStyles />
      <LoaderAnimation fixed disable={!authLoading} />

      <Suspense fallback={<LoaderAnimation fixed />}>
        <AppRoutes />
      </Suspense>
    </ThemeProvider>
  )
}

Source File: NotFound.jsx From cosmoscan-front with Apache License 2.0

6 votes

NotFound = () => {
  const { chain } = useContext(Store);
  return (
    <Container className="text-center">
      <Helmet>
        <title>404 Not found | Cosmoscan</title>
        <meta name="description" content="Oops, nothing here." />
        <meta itemProp="description" content="Oops, nothing here." />
        <meta property="og:description" content="Oops, nothing here." />
        <meta name="twitter:description" content="Oops, nothing here." />
      </Helmet>

      <Title>404 Not found | Cosmoscan</Title>
      <p>
        Oops! <br />
        Unfortunately, the page you are looking for is not found... &#128577;
      </p>
      <div>
        <LinkBtn to={`/${chain.value}`}>Home</LinkBtn>
      </div>
    </Container>
  );
}

Source File: App.jsx From covid with GNU General Public License v3.0

6 votes

AppHelmet = ({ language }) => {
  const t = useTranslate("App");
  const title = t("Covid Data - Refactored");
  return (
    <Helmet titleTemplate={`%s | ${title}`} defaultTitle={title}>
      <html lang={language} />
    </Helmet>
  );
}

Source File: Layout.jsx From EMP with MIT License

6 votes

Layout = ({title, description, children}) => {
    return ( 
        <>
        <Helmet>
            <title>{ title ? title + " - React Boilerplate" : "React.js Boilerplate" }</title>
            <meta name = "description" content={ description || "React.js Boilerplate" } />
        </Helmet>
        <Header/>
        <main className="container">
            {children}
        </main>
        <Footer/>
        </>
     );
}

Source File: index.js From fhir-app-starter with MIT License

6 votes

render() {
    const { error, smart, patient } = this.props;
    return (
      <Router history={history}>
        <Helmet />
        <Container style={{ marginTop: '2rem' }}>
          <Grid columns="1" stackable>
            <Grid.Column>
              {error ? <ErrorMessage {...error} /> : null}
              {patient ? <SuccessMessage patient={patient} user={smart.user} /> : null}
              <Grid.Row>
                <Header as="h1">FHIR App Starter</Header>
                <Divider />
              </Grid.Row>

              <Grid.Row>
                <Information />
              </Grid.Row>

              <Grid.Row>
                <Divider />
              </Grid.Row>

              {smart ? (
                <Switch>
                  <Route path="/" exact component={Home} />
                </Switch>
              ) : null}
            </Grid.Column>
          </Grid>
        </Container>
      </Router>
    );
  }

Source File: index.jsx From stack-labs-site with MIT License

5 votes

render() {
    const { children, helmetContext = {}, ...restProps } = this.props;
    const { appLocale, direction, isMobile } = this.state;
    const title = 'Stack Labs';

    const description = appLocale.locale === 'zh-CN' ? 'Stack' : 'Stack';
    let pageWrapperClass = 'page-wrapper';
    if (direction === 'rtl') {
      pageWrapperClass += ' page-wrapper-rtl';
    }
    return (
      <SiteContext.Provider value={{ isMobile }}>
        <HelmetProvider context={helmetContext}>
          <Helmet encodeSpecialCharacters={false}>
            <html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} data-direction={direction} />
            <title>{title}</title>
            <link rel="apple-touch-icon-precomposed" sizes="144x144" href={microLogo} />
            <meta name="description" content={description} />
            <meta property="og:title" content={title} />
            <meta property="og:type" content="website" />
            <meta property="og:image" content={microLogo} />
          </Helmet>
          <IntlProvider
            locale={appLocale.locale}
            messages={appLocale.messages}
            defaultLocale="zh-CN"
          >
            <ConfigProvider
              locale={appLocale.locale === 'zh-CN' ? zhCN : null}
              direction={direction}
            >
              <div className={pageWrapperClass}>
                <Header {...restProps} changeDirection={this.changeDirection} />
                {children}
              </div>
            </ConfigProvider>
          </IntlProvider>
        </HelmetProvider>
      </SiteContext.Provider>
    );
  }

Source File: App.js From akashlytics-deploy with GNU General Public License v3.0

5 votes

function App() {
  // Init analytics
  useEffect(() => {
    const init = async () => {
      const shouldLog = isLegitPath(window.location.pathname);
      shouldLog && (await analytics.pageview(HOSTNAME, window.location.pathname + window.location.search, document.title));
    };

    history.listen(async (location, action) => {
      try {
        setTimeout(async () => {
          const shouldLog = isLegitPath(location.pathname);
          shouldLog && (await analytics.pageview(HOSTNAME, location.pathname + location.search, document.title));
        }, 100);
      } catch (error) {
        console.log(error);
      }
    });

    init();
  }, []);

  const isLegitPath = (pathname) => {
    const firstPath = pathname.split("/")[1];
    return legitPaths.includes(firstPath) || firstPath === "";
  };

  return (
    <IntlProvider locale="en">
      <Router history={history}>
        <HelmetProvider>
          <QueryClientProvider client={queryClient}>
            <CustomSnackbarProvider>
              <AsyncTaskProvider>
                <PriceProvider>
                  <SettingsProvider>
                    <WalletProvider>
                      <TransactionModalProvider>
                        <PasswordConfirmationModalProvider>
                          <CertificateProvider>
                            <LocalNoteProvider>
                              <AkashProvider>
                                <TemplatesProvider>
                                  <Helmet defaultTitle="Akashlytics Deploy" titleTemplate="Akashlytics Deploy - %s" />

                                  <AppSettingsContainer />
                                </TemplatesProvider>
                              </AkashProvider>
                            </LocalNoteProvider>
                          </CertificateProvider>
                        </PasswordConfirmationModalProvider>
                      </TransactionModalProvider>
                    </WalletProvider>
                  </SettingsProvider>
                </PriceProvider>
              </AsyncTaskProvider>
            </CustomSnackbarProvider>
          </QueryClientProvider>
        </HelmetProvider>
      </Router>
    </IntlProvider>
  );
}

Source File: Terms.jsx From ResoBin with MIT License

5 votes

Terms = () => {
  return (
    <PageContainer>
      <Helmet>
        <title>Terms - ResoBin</title>
        <meta name="description" content="Terms and Conditions" />
      </Helmet>

      <PageHeading>
        <PageTitle>Terms and Conditions</PageTitle>
        <PageSubtitle>Last updated: January 31, 2022</PageSubtitle>
      </PageHeading>

      <Content>
        <h3>
          You agree not to use this service for any other purpose other than
          expressly permitted by these terms and conditions.
        </h3>
        <span>
          The moderators reserve the right to update the following terms and
          conditions.
          <br />
          Failure to comply with these terms and conditions may result in
          termination of your account.
        </span>

        <ol>
          <li>
            You agree to post reviews or comments that are relevant to the
            course content and isn&lsquo;t a blatant criticism or defamation of
            the course and/or instructor.
          </li>
          <li>
            All of Your Content is your sole responsibility and ResoBin (and any
            of its creators/moderators) are not responsible for any material
            that you upload.
          </li>
          <li>
            You agree that your reviews will be civil and not include sending
            unsolicited marketing messages or broadcasts. ResoBin reserves the
            right to remove and permanently delete your content from the Service
          </li>
          <li>
            You agree that the material uploaded by you must credit and
            acknowledge the person contributing to the resource.
          </li>
          <li>
            You agree not to upload any malicious files or explicit material and
            engage in any other activity that may damage other&lsquo;s
            experiance of the webapp.
          </li>
          <li>
            You are expected to notify us immediately if you believe the
            confidentiality of your log-in credentials has been compromised or
            if you suspect unauthorized use of your account.
          </li>
          <li>
            ResoBin reserves the right to modify or discontinue the service
            anytime and terminate your account without notice
          </li>
          <li>
            You agree to receive communications from us electronically, such as
            email, text, or mobile push notices, or notices and messages on the
            Service.
          </li>
          <li>
            Please feel free to reach out via the&nbsp;
            <Link to="/contact">Contact Us</Link> page on the left for any
            queries and/or suggestions.
          </li>
        </ol>
      </Content>
    </PageContainer>
  )
}

Source File: DeploymentList.js From akashlytics-deploy with GNU General Public License v3.0

5 votes

export function DeploymentList({ deployments, isLoadingDeployments, refreshDeployments }) {
  const [page, setPage] = useState(1);
  const classes = useStyles();
  const { settings } = useSettings();
  const { apiEndpoint } = settings;
  const rowsPerPage = 10;
  const orderedDeployments = deployments ? [...deployments].sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1)) : [];
  const start = (page - 1) * rowsPerPage;
  const end = start + rowsPerPage;
  const currentPageDeployments = orderedDeployments.slice(start, end);
  const pageCount = Math.ceil(orderedDeployments.length / rowsPerPage);

  useEffect(() => {
    refreshDeployments();
  }, [refreshDeployments, apiEndpoint]);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  return (
    <>
      <Helmet title="Deployment List" />

      <LinearLoadingSkeleton isLoading={isLoadingDeployments} />
      <Box className={classes.root}>
        <Box className={classes.titleContainer}>
          <Typography variant="h3" className={classes.title}>
            Deployments
          </Typography>

          <Box marginLeft="1rem">
            <IconButton aria-label="back" onClick={refreshDeployments} size="small">
              <RefreshIcon />
            </IconButton>
          </Box>

          <Button className={classes.createBtn} variant="contained" size="medium" color="primary" component={Link} to="/createDeployment">
            <AddIcon />
            &nbsp;Create Deployment
          </Button>
        </Box>
        <Box>
          {currentPageDeployments.map((deployment) => (
            <DeploymentListRow key={deployment.dseq} deployment={deployment} refreshDeployments={refreshDeployments} />
          ))}
        </Box>
        <Box padding="1rem 1rem 2rem">
          <Pagination count={pageCount} onChange={handleChangePage} page={page} size="large" />
        </Box>
      </Box>
    </>
  );
}

Source File: index.js From react-portfolio with MIT License

5 votes

Home = () => {
  return (
    <HelmetProvider>
      <section id="home" className="home">
        <Helmet>
          <meta charSet="utf-8" />
          <title> {meta.title}</title>
          <meta name="description" content={meta.description} />
        </Helmet>
        <div className="intro_sec d-block d-lg-flex align-items-center ">
          <div
            className="h_bg-image order-1 order-lg-2 h-100 "
            style={{ backgroundImage: `url(${introdata.your_img_url})` }}
          ></div>
          <div className="text order-2 order-lg-1 h-100 d-lg-flex justify-content-center">
            <div className="align-self-center ">
              <div className="intro mx-auto">
                <h2 className="mb-1x">{introdata.title}</h2>
                <h1 className="fluidz-48 mb-1x">
                  <Typewriter
                    options={{
                      strings: [
                        introdata.animated.first,
                        introdata.animated.second,
                        introdata.animated.third,
                      ],
                      autoStart: true,
                      loop: true,
                      deleteSpeed: 10,
                    }}
                  />
                </h1>
                <p className="mb-1x">{introdata.description}</p>
                <div className="intro_btn-action pb-5">
                  <Link to="/portfolio" className="text_2">
                    <div id="button_p" className="ac_btn btn ">
                      My Portfolio
                      <div className="ring one"></div>
                      <div className="ring two"></div>
                      <div className="ring three"></div>
                    </div>
                  </Link>
                  <Link to="/contact">
                    <div id="button_h" className="ac_btn btn">
                      Contact Me
                      <div className="ring one"></div>
                      <div className="ring two"></div>
                      <div className="ring three"></div>
                    </div>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </HelmetProvider>
  );
}

Source File: UserLayout.jsx From the-eye-knows-the-garbage with MIT License

5 votes

UserLayout = props => {
  const {
    route = {
      routes: [],
    },
  } = props;
  const { routes = [] } = route;
  const {
    children,
    location = {
      pathname: '',
    },
  } = props;
  const { formatMessage } = useIntl();
  const { breadcrumb } = getMenuData(routes);
  const title = getPageTitle({
    pathname: location.pathname,
    formatMessage,
    breadcrumb,
    ...props,
  });
  return (
    <HelmetProvider>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={title} />
      </Helmet>

      <div className={styles.container}>
        <div className={styles.lang}>
          <SelectLang />
        </div>
        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.header}>
                <img alt="logo" className={styles.logo} src={logo} />
                <span className={styles.title}>TyAdmin</span>
            </div>
            <div className={styles.desc}>Generate By TyAdmin Cli</div>
          </div>
          {children}
        </div>
        <DefaultFooter
          copyright={`${new Date().getFullYear()} TyAdmin By mtianyan`}
          links={[
            {
              key: 'TyAdmin',
              title: 'TyAdmin',
              href: 'https://github.com/mtianyan/tyadmin_api_cli',
              blankTarget: true,
            },
            {
              key: 'github',
              title: <GithubOutlined />,
              href: 'https://github.com/mtianyan',
              blankTarget: true,
            },
            {
              key: 'Ant Design',
              title: 'Ant Design Pro V4',
              href: 'https://ant.design',
              blankTarget: true,
            },
          ]}
        />
      </div>
    </HelmetProvider>
  );
}

Source File: Stats.jsx From cosmoscan-front with Apache License 2.0

5 votes

Stats = () => {
  const res = useRequest(API.getNetworkStats);
  const {
    // Network
    total_staking_balance: stakingBal,
    number_delegators: delegators,
    number_multi_delegators: multiDelegators,
    total_delegators: totalDelegators,
    network_size: networkSize,
    // Accounts
    total_accounts: accs,
    total_whale_accounts: whales,
    total_small_accounts: smallAccs,
    // Balances
    transfer_volume: txVol,
    fee_volume: feeVol,
    undelegation_volume: unbond,
    highest_fee: highestFee,
    // Health
    block_delay: blockDelay,
    total_jailers: jailers,
  } = res.resp ? res.resp : {};

  return (
    <Container>
      <Helmet>
        <title>Cosmos network statistics | Cosmoscan</title>
        <meta
          name="description"
          content="Overall data and stats of Cosmoshub."
        />
        <meta
          itemProp="description"
          content="Overall data and stats of Cosmoshub."
        />
        <meta
          property="og:description"
          content="Overall data and stats of Cosmoshub."
        />
        <meta
          name="twitter:description"
          content="Overall data and stats of Cosmoshub."
        />
      </Helmet>

      <SectionChart />
      <DatePickerStyled
        onChange={(date) => res.request({ to: moment(date).unix() })}
      />
      <SectionNetwork
        stats={{
          stakingBal,
          delegators,
          multiDelegators,
          totalDelegators,
          networkSize,
        }}
      />
      <SectionAccounts
        stats={{
          accs,
          whales,
          smallAccs,
        }}
      />
      <SectionBalances
        stats={{
          txVol,
          feeVol,
          unbond,
          highestFee,
        }}
      />
      <SectionHealth stats={{ blockDelay, jailers }} />
    </Container>
  );
}

Source File: UserLayout.jsx From vpp with MIT License

5 votes

UserLayout = props => {
  const {
    route = {
      routes: [],
    },
  } = props;
  const { routes = [] } = route;
  const {
    children,
    location = {
      pathname: '',
    },
  } = props;
  const { formatMessage } = useIntl();
  const { breadcrumb } = getMenuData(routes);
  const title = getPageTitle({
    pathname: location.pathname,
    formatMessage,
    breadcrumb,
    ...props,
  });
  return (
    <HelmetProvider>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={title} />
      </Helmet>

      <div className={styles.container}>
        <div className={styles.lang}>
          <SelectLang />
        </div>
        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="logo" className={styles.logo} src={logo} />
                <span className={styles.title}>Vpp Front End</span>
              </Link>
            </div>
          </div>
          {children}
        </div>
      </div>
    </HelmetProvider>
  );
}

Source File: Charts.jsx From cosmoscan-front with Apache License 2.0

5 votes

Charts = () => {
  const { resp, isLoading } = useRequest(API.getProposalsCharts);
  const [turnouts, setTurnouts] = useState([]);
  const [voterActivity, setVoterActivity] = useState([]);
  const [vetoed, setVetoed] = useState([]);

  useEffect(() => {
    if (!resp || !resp.length) return;

    resp.reverse().forEach((prop) => {
      setTurnouts((prev) => [
        ...prev,
        { name: prop.proposal_id, dataPiece: prop.turnout },
      ]);
      if (prop.voters_total !== 0) {
        setVoterActivity((prev) => [
          ...prev,
          {
            name: prop.proposal_id,
            voters: prop.voters_total,
            validators: prop.validators_total,
          },
        ]);
      }
      if (Number(prop.no_with_veto_percent) !== 0) {
        setVetoed((prev) => [
          ...prev,
          {
            name: prop.proposal_id,
            dataPiece: +prop.no_with_veto_percent,
          },
        ]);
      }
    });
  }, [resp]);

  return (
    <Container>
      <Helmet>
        <title>Cosmos governance charts | Cosmoscan</title>
        <meta
          name="description"
          content="View aggregated governance activity data of Cosmoshub."
        />
        <meta
          itemProp="description"
          content="View aggregated governance activity data of Cosmoshub."
        />
        <meta
          property="og:description"
          content="View aggregated governance activity data of Cosmoshub."
        />
        <meta
          name="twitter:description"
          content="View aggregated governance activity data of Cosmoshub."
        />
      </Helmet>

      <Row xs={1} xl={2}>
        <ColMarginStandard>
          <ProposalTurnout isLoading={isLoading} data={turnouts} />
        </ColMarginStandard>
        <ColMarginStandard>
          <VoterActivity isLoading={isLoading} data={voterActivity} />
        </ColMarginStandard>
        {/* <ColMarginStandard> */}
        {/*  <VotingPowerToVeto /> */}
        {/* </ColMarginStandard> */}
        <ColMarginStandard>
          <VetoedProposals isLoading={isLoading} data={vetoed} />
        </ColMarginStandard>
      </Row>
    </Container>
  );
}

Source File: Page.js From course-manager with MIT License

5 votes

Page = forwardRef(({ children, title = '', ...other }, ref) => (
  <Box ref={ref} {...other}>
    <Helmet>
      <title>{title}</title>
    </Helmet>
    {children}
  </Box>
))

Source File: App.jsx From full-stack-fastapi-react-postgres-boilerplate with MIT License

5 votes

render() {
    const { dispatch, user } = this.props;

    return (
      <Router history={history}>
        <ThemeProvider theme={theme}>
          <AppWrapper logged={user.isAuthenticated}>
            <Helmet
              defer={false}
              htmlAttributes={{ lang: 'pt-br' }}
              encodeSpecialCharacters={true}
              defaultTitle={config.name}
              titleTemplate={`%s | ${config.name}`}
              titleAttributes={{ itemprop: 'name', lang: 'pt-br' }}
            />
            {user.isAuthenticated && <Header dispatch={dispatch} user={user} />}
            <Main isAuthenticated={user.isAuthenticated}>
              <Switch>
                <RoutePublic
                  isAuthenticated={user.isAuthenticated}
                  path="/"
                  exact
                  component={Home}
                />
                <RoutePrivate
                  isAuthenticated={user.isAuthenticated}
                  path="/private"
                  component={Private}
                />
                <Route component={NotFound} />
              </Switch>
            </Main>
            <Footer />
            <SystemAlerts />
            <GlobalStyles />
          </AppWrapper>
        </ThemeProvider>
      </Router>
    );
  }

Source File: wrapper.js From MDXP with MIT License

5 votes

Wrapper = ({children, doc}) => <React.Fragment>
  <Helmet>
    <link rel="icon" type="image/png" href={favicon}/>
  </Helmet>
  {children}
</React.Fragment>

Source File: Search.js From zero-neko with MIT License

5 votes

Search = () => {
    const location = useLocation();
    const [words, setWords] = useState();
    const [page, setPage] = useState(1);
    const [data, setData] = useState([]);
    const [checkData, setCheckData] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            setData([]);
            setCheckData(true);
            const searchParams = new URLSearchParams(location.search);
            const wordParams = searchParams.get('words');
            if (words !== wordParams) {
                setPage(1);
                setWords(wordParams);
            }
            const proxy = 'https://zeroneko-corsproxy.herokuapp.com/'
            const url = proxy + 'http://jisho.org/api/v1/search/words?keyword=' + encodeURIComponent(wordParams) + (page ? '&page=' + page : "");
            const response = await fetch(url);
            const json = await response.json();
            if (json.data.length === 0) {
                setCheckData(false);
            }
            setData(json.data);
            window.scrollTo(0, 0)
        }
        fetchData();
    },[page, location, words])

    return(
        <>
        <HelmetProvider>
            <Helmet>
                <title>{"Search - "+ words + " - Zeroneko"}</title>
            </Helmet>
        </HelmetProvider>
        <div className="mx-[20px] lg:mx-[160px] xl:mx-[200px]">
            <div className="flex flex-col lg:flex-row">
                <div className="flex flex-col w-full">
                    <div className=" w-full">
                        <H1 span={"語"} text={"Words"}></H1>
                        <p className="text-center">Searched for <span className="text-primary capitalize">{words}</span>  <span className={page === 1 ? "hidden " : ""}>page <span className="text-primary">{page}</span></span></p>
                        {/* <p>{!(words[0] === '"' && words[words.length - 1] === '"') ? "You can also try a search for \""+words+'"' : ""}</p> */}
                    </div>
                    <WordsContainer data={data} checkData={checkData}/>
                    <button onClick={() => {setPage(parseInt(page) + 1)}} className={(data.length < 7 ? "hidden " : "") +"transition-colors mt-12 duration-300 mx-auto border-b-2 border-black dark:border-white hover:border-primary dark:hover:border-primary hover:text-primary hover:cursor-pointer"} >More Words</button>
                </div>
            </div>
        </div>
        </>
    )
}

react-helmet-async#Helmet JavaScript Examples