react-helmet-async#HelmetProvider JavaScript Examples

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

// ----------------------------------------------------------------------

ReactDOM.render(
  <HelmetProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </HelmetProvider>,
  document.getElementById('root')
);

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>
        </>
    )
}

AppProviders = ({ translations, language, children }) => (
  <TranslatorProvider translations={translations}>
    <HelmetProvider>
      <BackendProvider>
        <AppHelmet language={language} />
        <Router>
          <div className="App" id="router-container">
            {children}
          </div>
        </Router>
      </BackendProvider>
    </HelmetProvider>
  </TranslatorProvider>
)

App = () => (
  <Router>
    <HelmetProvider>
      <ThemeProvider theme={theme}>
        <Normalize />
        <GlobalStyles />
        <StateProvider>
          <LayoutDefault>
            <Routes />
          </LayoutDefault>
        </StateProvider>
      </ThemeProvider>
    </HelmetProvider>
  </Router>
)

ServerRouter = ({
  initialLanguage,
  helmetContext,
  routerContext,
  store,
  url
}) => {
  const i18n = configureI18next(initialLanguage);

  return (
    <HelmetProvider context={helmetContext}>
      <StaticRouter
        location={url}
        context={routerContext}
      >
        {renderRoutes(routes, {
          store,
          i18n
        })}
      </StaticRouter>
    </HelmetProvider>
  );
}

StrictApp = () => {
  useEffect(() => {
    initSentry()
  }, [])

  return (
    <StrictMode>
      <Provider store={store}>
        <PersistGate loading={<LoaderAnimation />} persistor={persistor}>
          <Router>
            <HelmetProvider>
              <App />
            </HelmetProvider>
          </Router>
        </PersistGate>
      </Provider>
    </StrictMode>
  )
}

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>
  );
}

describe('<RegisterPage />', () => {
  const history = createMemoryHistory();
  const store = configureStore({}, history);

  it('should render its registerPage', () => {
    const {
      container: { firstChild },
    } = render(
      <Provider store={store}>
        <IntlProvider locale={DEFAULT_LOCALE}>
          <ConnectedRouter history={history}>
            <HelmetProvider>
              <RegisterPage />
            </HelmetProvider>
          </ConnectedRouter>
        </IntlProvider>
      </Provider>,
    );

    expect(firstChild).toMatchSnapshot();
  });
});

describe('<PaymentPage />', () => {
  const history = createMemoryHistory();
  const store = configureStore({}, history);

  it('should render its PaymentPage', () => {
    const {
      container: { firstChild },
    } = render(
      <Provider store={store}>
        <IntlProvider locale={DEFAULT_LOCALE}>
          <ConnectedRouter history={history}>
            <HelmetProvider>
              <PaymentPage />
            </HelmetProvider>
          </ConnectedRouter>
        </IntlProvider>
      </Provider>,
    );

    expect(firstChild).toMatchSnapshot();
  });
});

describe('<LoginPage />', () => {
  const history = createMemoryHistory();
  const store = configureStore({}, history);

  it('should render its loginPage', () => {
    const {
      container: { firstChild },
    } = render(
      <Provider store={store}>
        <IntlProvider locale={DEFAULT_LOCALE}>
          <ConnectedRouter history={history}>
            <HelmetProvider>
              <LoginPage />
            </HelmetProvider>
          </ConnectedRouter>
        </IntlProvider>
      </Provider>,
    );

    expect(firstChild).toMatchSnapshot();
  });
});

ConnectedApp = ({ messages }) => (
  <Provider store={store}>
    <LanguageProvider messages={messages}>
      <ConnectedRouter history={history}>
        <HelmetProvider>
          <App />
        </HelmetProvider>
      </ConnectedRouter>
    </LanguageProvider>
  </Provider>
)

ClientRouter = () => (
  <HelmetProvider>
    <Router history={history}>
      {renderRoutes(routes, {
        store,
        i18n
      })}
    </Router>
  </HelmetProvider>
)

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={<Loader size={100} block />} persistor={persistor}>
      <HelmetProvider>
        <App />
      </HelmetProvider>
    </PersistGate>
  </Provider>,
  document.getElementById('root'),
);

// ----------------------------------------------------------------------

ReactDOM.render(
  <HelmetProvider>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </HelmetProvider>,
  document.getElementById('root')
);

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>
  );
}

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>
        </>
    )
}

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>
    );
  }

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>
  );
}

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>
  );
}

ReactDOM.render(
  <Provider store={store}>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </Provider>,
  document.getElementById('root'),
);

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>
  );
}

About = () => {
  return (
    <HelmetProvider>
      <Container className="About-header">
        <Helmet>
          <meta charSet="utf-8" />
          <title> About | {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">About me</h1>
            <hr className="t_border my-4 ml-0 text-left" />
          </Col>
        </Row>
        <Row className="sec_sp">
          <Col lg="5">
            <h3 className="color_sec py-4">{dataabout.title}</h3>
          </Col>
          <Col lg="7" className="d-flex align-items-center">
            <div>
              <p>{dataabout.aboutme}</p>
            </div>
          </Col>
        </Row>
        <Row className=" sec_sp">
          <Col lg="5">
            <h3 className="color_sec py-4">Work Timline</h3>
          </Col>
          <Col lg="7">
            <table className="table caption-top">
              <tbody>
                {worktimeline.map((data, i) => {
                  return (
                    <tr key={i}>
                      <th scope="row">{data.jobtitle}</th>
                      <td>{data.where}</td>
                      <td>{data.date}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </Col>
        </Row>
        <Row className="sec_sp">
          <Col lg="5">
            <h3 className="color_sec py-4">Skills</h3>
          </Col>
          <Col lg="7">
            {skills.map((data, i) => {
              return (
                <div key={i}>
                  <h3 className="progress-title">{data.name}</h3>
                  <div className="progress">
                    <div
                      className="progress-bar"
                      style={{
                        width: `${data.value}%`,
                      }}
                    >
                      <div className="progress-value">{data.value}%</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </Col>
        </Row>
        <Row className="sec_sp">
          <Col lang="5">
            <h3 className="color_sec py-4">services</h3>
          </Col>
          <Col lg="7">
            {services.map((data, i) => {
              return (
                <div className="service_ py-4" key={i}>
                  <h5 className="service__title">{data.title}</h5>
                  <p className="service_desc">{data.description}</p>
                </div>
              );
            })}
          </Col>
        </Row>
      </Container>
    </HelmetProvider>
  );
}

ContactUs = () => {
  const [formData, setFormdata] = useState({
    email: "",
    name: "",
    message: "",
    loading: false,
    show: false,
    alertmessage: "",
    variant: "",
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    setFormdata({ loading: true });

    const templateParams = {
      from_name: formData.email,
      user_name: formData.name,
      to_name: contactConfig.YOUR_EMAIL,
      message: formData.message,
    };

    emailjs
      .send(
        contactConfig.YOUR_SERVICE_ID,
        contactConfig.YOUR_TEMPLATE_ID,
        templateParams,
        contactConfig.YOUR_USER_ID
      )
      .then(
        (result) => {
          console.log(result.text);
          setFormdata({
            loading: false,
            alertmessage: "SUCCESS! ,Thankyou for your messege",
            variant: "success",
            show: true,
          });
        },
        (error) => {
          console.log(error.text);
          setFormdata({
            alertmessage: `Faild to send!,${error.text}`,
            variant: "danger",
            show: true,
          });
          document.getElementsByClassName("co_alert")[0].scrollIntoView();
        }
      );
  };

  const handleChange = (e) => {
    setFormdata({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <HelmetProvider>
      <Container>
        <Helmet>
          <meta charSet="utf-8" />
          <title>{meta.title} | Contact</title>
          <meta name="description" content={meta.description} />
        </Helmet>
        <Row className="mb-5 mt-3">
          <Col lg="8">
            <h1 className="display-4 mb-4">Contact Me</h1>
            <hr className="t_border my-4 ml-0 text-left" />
          </Col>
        </Row>
        <Row className="sec_sp">
          <Col lg="12">
            <Alert
              //show={formData.show}
              variant={formData.variant}
              className={`rounded-0 co_alert ${
                formData.show ? "d-block" : "d-none"
              }`}
              onClose={() => setFormdata({ show: false })}
              dismissible
            >
              <p className="my-0">{formData.alertmessage}</p>
            </Alert>
          </Col>
          <Col lg="5" className="mb-5">
            <h3 className="color_sec py-4">Get in touch</h3>
            <address>
              <strong>Email:</strong>{" "}
              <a href={`mailto:${contactConfig.YOUR_EMAIL}`}>
                {contactConfig.YOUR_EMAIL}
              </a>
              <br />
              <br />
              {contactConfig.hasOwnProperty("YOUR_FONE") ? (
                <p>
                  <strong>Phone:</strong> {contactConfig.YOUR_FONE}
                </p>
              ) : (
                ""
              )}
            </address>
            <p>{contactConfig.description}</p>
          </Col>
          <Col lg="7" className="d-flex align-items-center">
            <form onSubmit={handleSubmit} className="contact__form w-100">
              <Row>
                <Col lg="6" className="form-group">
                  <input
                    className="form-control"
                    id="name"
                    name="name"
                    placeholder="Name"
                    value={formData.name || ""}
                    type="text"
                    required
                    onChange={handleChange}
                  />
                </Col>
                <Col lg="6" className="form-group">
                  <input
                    className="form-control rounded-0"
                    id="email"
                    name="email"
                    placeholder="Email"
                    type="email"
                    value={formData.email || ""}
                    required
                    onChange={handleChange}
                  />
                </Col>
              </Row>
              <textarea
                className="form-control rounded-0"
                id="message"
                name="message"
                placeholder="Message"
                rows="5"
                value={formData.message}
                onChange={handleChange}
                required
              ></textarea>
              <br />
              <Row>
                <Col lg="12" className="form-group">
                  <button className="btn ac_btn" type="submit">
                    {formData.loading ? "Sending..." : "Send"}
                  </button>
                </Col>
              </Row>
            </form>
          </Col>
        </Row>
      </Container>
      <div className={formData.loading ? "loading-bar" : "d-none"}></div>
    </HelmetProvider>
  );
}