react-helmet-async#HelmetProvider TypeScript Examples

The following examples show how to use react-helmet-async#HelmetProvider. 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: shareChart.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <InspectorWrapper>
    <Provider store={store}>
      <ThemeProvider>
        <HelmetProvider>
          <React.StrictMode>
            <ShareChartPage />
          </React.StrictMode>
        </HelmetProvider>
      </ThemeProvider>
    </Provider>
  </InspectorWrapper>,
  MOUNT_NODE,
);
Example #2
Source File: index.tsx    From react-boilerplate-cra-template with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <ThemeProvider>
      <HelmetProvider>
        <React.StrictMode>
          <App />
        </React.StrictMode>
      </HelmetProvider>
    </ThemeProvider>
  </Provider>,
  MOUNT_NODE,
);
Example #3
Source File: index.test.tsx    From react-boilerplate-cra-template with MIT License 6 votes vote down vote up 
renderPage = () =>
  renderer.create(
    <MemoryRouter>
      <ThemeProvider theme={themes.light}>
        <HelmetProvider>
          <NotFoundPage />
        </HelmetProvider>
      </ThemeProvider>
    </MemoryRouter>,
  )
Example #4
Source File: index.test.tsx    From react-boilerplate-cra-template with MIT License 6 votes vote down vote up 
renderGithubRepoForm = (store: Store) =>
  render(
    <Provider store={store}>
      <ThemeProvider>
        <HelmetProvider>
          <GithubRepoForm />
        </HelmetProvider>
      </ThemeProvider>
    </Provider>,
  )
Example #5
Source File: index.tsx    From react-boilerplate-cra-template with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <HelmetProvider>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </HelmetProvider>
  </Provider>,
  MOUNT_NODE,
);
Example #6
Source File: main.component.tsx    From filecoin-CID-checker with Apache License 2.0 6 votes vote down vote up 
Main = () => {
  return (
    <HelmetProvider>
      <Router>
        <MainWrapper>
          <Helmet>
            <title>{DOCUMENT_TITLE}</title>
            <meta content={DOCUMENT_DESCRIPTION} name="description" />
          </Helmet>
          <SearchProvider>
            <Header />
            <Body>
              <Switch>
                <Route exact path={['/', '/deal/:deal', '/:search']} component={Deals} />
                <Redirect to="/" />
              </Switch>
            </Body>
          </SearchProvider>
        </MainWrapper>
      </Router>
    </HelmetProvider>
  )
}
Example #7
Source File: index.tsx    From akashlytics with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <QueryClientProvider client={queryClient}>
        <IntlProvider locale={navigator.language}>
          <HelmetProvider>
            <SnackbarProvider maxSnack={3} dense hideIconVariant>
              <MediaQueryProvider>
                <Router>
                  <ScrollToTop />
                  <App />
                </Router>
              </MediaQueryProvider>
            </SnackbarProvider>
          </HelmetProvider>
        </IntlProvider>
      </QueryClientProvider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #8
Source File: index.tsx    From oasis-wallet-web with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <Provider store={store}>
    <ThemeProvider>
      <HelmetProvider>
        <BrowserRouter>
          <React.StrictMode>
            <App />
          </React.StrictMode>
        </BrowserRouter>
      </HelmetProvider>
    </ThemeProvider>
  </Provider>,
  MOUNT_NODE,
)
Example #9
Source File: popup.tsx    From oasis-wallet-web with Apache License 2.0 6 votes vote down vote up 
store.ready().then(() => {
  ReactDOM.render(
    <Provider store={store}>
      <ThemeProvider>
        <HelmetProvider>
          <HashRouter>
            <React.StrictMode>
              <App />
            </React.StrictMode>
          </HashRouter>
        </HelmetProvider>
      </ThemeProvider>
    </Provider>,
    MOUNT_NODE,
  )
})
Example #10
Source File: index.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <InspectorWrapper>
    <Provider store={store}>
      <ThemeProvider>
        <HelmetProvider>
          <React.StrictMode>
            <App />
          </React.StrictMode>
        </HelmetProvider>
      </ThemeProvider>
    </Provider>
  </InspectorWrapper>,
  MOUNT_NODE,
);
Example #11
Source File: index.tsx    From interbtc-ui with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <QueryClientProvider client={queryClient}>
        <HelmetProvider>
          <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
              <App />
            </PersistGate>
          </Provider>
        </HelmetProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #12
Source File: shareDashboard.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <InspectorWrapper>
    <Provider store={store}>
      <ThemeProvider>
        <HelmetProvider>
          <React.StrictMode>
            <ShareDashboardPage />
          </React.StrictMode>
        </HelmetProvider>
      </ThemeProvider>
    </Provider>
  </InspectorWrapper>,
  MOUNT_NODE,
);
Example #13
Source File: shareStoryPlayer.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <InspectorWrapper>
    <Provider store={store}>
      <ThemeProvider>
        <HelmetProvider>
          <React.StrictMode>
            <ShareStoryPlayerPage />
          </React.StrictMode>
        </HelmetProvider>
      </ThemeProvider>
    </Provider>
  </InspectorWrapper>,
  MOUNT_NODE,
);
Example #14
Source File: render.tsx    From cra-serverless with MIT License 6 votes vote down vote up 
render = (Tree: React.ElementType, path: string) => {
  const context = { helmet: {} as HelmetData }
  const sheets = new ServerStyleSheet()

  const markup = renderToString(
    sheets.collectStyles(
      <HelmetProvider context={context}>
        <StaticRouter location={path}>
          <Tree />
        </StaticRouter>
      </HelmetProvider>,
    ),
  )

  return html
    .replace('<div id="root"></div>', `<div id="root">${markup}</div>`)
    .replace('<title>React App</title>', context.helmet.title.toString())
    .replace('</head>', `${context.helmet.meta.toString()}</head>`)
    .replace('</head>', `${context.helmet.link.toString()}</head>`)
    .replace('</head>', `${sheets.getStyleTags()}</head>`)
    .replace('<body>', `<body ${context.helmet.bodyAttributes.toString()}>`)
}
Example #15
Source File: Providers.tsx    From glide-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Provider store={store}>
        <ToastsProvider>
          <HelmetProvider>
            <ThemeProviderWrapper>
              <LanguageProvider>
                <RefreshContextProvider>
                  <ModalProvider>{children}</ModalProvider>
                </RefreshContextProvider>
              </LanguageProvider>
            </ThemeProviderWrapper>
          </HelmetProvider>
        </ToastsProvider>
      </Provider>
    </Web3ReactProvider>
  )
}
Example #16
Source File: index.tsx    From react-pokedex with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <HelmetProvider>
      <Helmet>
        <meta charSet="utf-8" />
        <title>React Pokédex</title>
        <meta
          name="description"
          content="a simple pokédex for your pokemon needs."
        />
      </Helmet>
      <Provider store={store}>
        <App />
      </Provider>
    </HelmetProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #17
Source File: Root.tsx    From react-pwa with MIT License 6 votes vote down vote up 
function render(App: ComponentType) {
  root.render(
    <StrictMode>
      <RecoilRoot>
        <HelmetProvider>
          <ThemeProvider>
            <App />
          </ThemeProvider>
        </HelmetProvider>
      </RecoilRoot>
    </StrictMode>,
  );
}
Example #18
Source File: Providers.tsx    From vvs-ui with GNU General Public License v3.0 6 votes vote down vote up 
Providers: React.FC = ({ children }) => {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Provider store={store}>
        <ToastsProvider>
          <HelmetProvider>
            <ThemeProviderWrapper>
              <LanguageProvider>
                <RefreshContextProvider>
                  <ModalProvider>{children}</ModalProvider>
                </RefreshContextProvider>
              </LanguageProvider>
            </ThemeProviderWrapper>
          </HelmetProvider>
        </ToastsProvider>
      </Provider>
    </Web3ReactProvider>
  )
}
Example #19
Source File: index.tsx    From vvs-ui with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <HelmetProvider>
      <ThemeProvider theme={light}>
        <App />
      </ThemeProvider>
    </HelmetProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #20
Source File: index.tsx    From WEB_CodeSquare_AmongUs with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <HelmetProvider>
        <BrowserRouter>
          <Helmet>
            <link
              rel="apple-touch-icon"
              sizes="180x180"
              href="/apple-touch-icon.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="32x32"
              href="/favicon-32x32.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="16x16"
              href="/favicon-16x16.png"
            />
            <link rel="manifest" href="/site.webmanifest" />
            <link
              rel="mask-icon"
              href="/safari-pinned-tab.svg"
              color="#5bbad5"
            />
            <meta name="msapplication-TileColor" content="#2b5797" />
            <meta name="theme-color" content="#ffffff" />
          </Helmet>
          <Global styles={GlobalStyles} />
          <App />
        </BrowserRouter>
      </HelmetProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root"),
);
Example #21
Source File: index.test.tsx    From datart with Apache License 2.0 5 votes vote down vote up 
renderPage = () =>
  renderer.create(
    <MemoryRouter>
      <HelmetProvider>
        <NotFoundPage />
      </HelmetProvider>
    </MemoryRouter>,
  )
Example #22
Source File: index.tsx    From cra-pipeline with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <HelmetProvider>
    <GlobalStyles />
    <App />
  </HelmetProvider>,
  document.getElementById('root'),
)
Example #23
Source File: index.test.tsx    From datart with Apache License 2.0 5 votes vote down vote up 
renderPage = () =>
  renderer.create(
    <MemoryRouter>
      <HelmetProvider>
        <NotFoundPage />
      </HelmetProvider>
    </MemoryRouter>,
  )
Example #24
Source File: index.tsx    From cra-serverless with MIT License 5 votes vote down vote up 
render(
  <HelmetProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </HelmetProvider>,
  document.getElementById('root'),
)
Example #25
Source File: LoginLayout.tsx    From dashboard with Apache License 2.0 5 votes vote down vote up 
LoginLayout: React.FC<UserLayoutProps> = (props) => {
  const {
    route = {
      routes: [],
    },
  } = props;
  const { routes = [] } = route;
  const {
    children,
    location = {
      pathname: '',
    },
  } = props;
  const { breadcrumb } = getMenuData(routes);
  const title = getPageTitle({
    pathname: location.pathname,
    breadcrumb,
    ...props,
  });
  return (
    <HelmetProvider>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={title} />
      </Helmet>
      <div className={styles.container}>
        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="logo" className={styles.logo} src={logo} />
              </Link>
            </div>
          </div>
          {children}
        </div>
      </div>
    </HelmetProvider>
  );
}
Example #26
Source File: App.tsx    From antibody-web with MIT License 5 votes vote down vote up 
App = () => {
  const [appState, dispatch] = useReducer(
    appReducer,
    initialState
  );

  const setAppError = useCallback((error: AppError | null) => {
    dispatch({
      type: "SET_ERROR",
      error
    });
  }, [dispatch]);

  const setLocale = useCallback((locale: string) => {
    dispatch({
      type: "SET_LOCALE",
      locale,
    });
  }, []);

  const container = new AppContainer();

  return (
    <AppContext.Provider
      value={{ state: appState, setLocale, setAppError, dispatch, container }}
    >
      <IntlProvider
        locale={appState.locale}
        messages={flatten(messages[appState.locale])}
      >
        <HelmetProvider>
          <ErrorBoundary>
            <Router>
              <Layout error={appState.error}>
                <Switch>
                  <Route
                    path="/"
                    exact
                    component={Home} />
                  <LoginProvider>
                    <TestRoutes />
                  </LoginProvider>
                </Switch>
              </Layout>
            </Router>
          </ErrorBoundary>
        </HelmetProvider>
      </IntlProvider>
    </AppContext.Provider>
  );
}
Example #27
Source File: UserLayout.tsx    From ui-visualization with MIT License 5 votes vote down vote up 
UserLayout: React.FC<UserLayoutProps> = (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}>Ant Design</span>
              </Link>
            </div>
            <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
          </div>
          {children}
        </div>
        <DefaultFooter />
      </div>
    </HelmetProvider>
  );
}
Example #28
Source File: UserLayout.tsx    From ant-design-pro-V4 with MIT License 5 votes vote down vote up 
UserLayout: React.FC<UserLayoutProps> = (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}>Ant Design</span>
              </Link>
            </div>
            <div className={styles.desc}>
              <FormattedMessage
                id="pages.layouts.userLayout.title"
                defaultMessage="Ant Design. The most influential Web design specification in Xihu District."
              />
            </div>
          </div>
          {children}
        </div>
        <DefaultFooter />
      </div>
    </HelmetProvider>
  );
}
Example #29
Source File: base-seo.test.tsx    From gatsby-plugin-next-seo with MIT License 5 votes vote down vote up 
render = (ui: ReactElement) =>
  testRender(ui, { wrapper: HelmetProvider })