react-dom#hydrate JavaScript Examples

The following examples show how to use react-dom#hydrate. 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: client.js    From Edlib with GNU General Public License v3.0 6 votes vote down vote up 
hydrate(
    <CacheProvider value={emotionCache}>
        <ThemeProvider theme={muiTheme}>
            <BrowserRouter>
                <FetchProvider initialState={window.__FETCH_STATE__ || {}}>
                    {/* eslint-disable-next-line no-restricted-globals*/}
                    <ConfigurationProvider
                        apiUrl={(
                            location.protocol +
                            '//' +
                            location.host
                        ).replace('www', 'api')}
                        wwwUrl={location.protocol + '//' + location.host}
                    >
                        <App />
                    </ConfigurationProvider>
                </FetchProvider>
            </BrowserRouter>
        </ThemeProvider>
    </CacheProvider>,
    document.getElementById('root')
);
Example #2
Source File: client.js    From divar-starter-kit with MIT License 6 votes vote down vote up 
hydrate(
  <Provider store={store}>
    <InitialSSRDataProvider value={initialSSRDataValue}>
      <BrowserRouter>
        <AppRouter />
      </BrowserRouter>
    </InitialSSRDataProvider>
  </Provider>,
  document.getElementById('app'),
);
Example #3
Source File: client.js    From merkur with MIT License 6 votes vote down vote up 
function createWidget(widgetParams) {
  return createMerkurWidget({
    ...widgetProperties,
    ...widgetParams,
    $dependencies: {
      hydrate,
      render,
      unmountComponentAtNode,
    },
    async mount(widget) {
      return mapViews(widget, viewFactory, ({ View, container, isSlot }) => {
        if (!container) {
          return null;
        }

        return (
          container?.children?.length && !isSlot
            ? widget.$dependencies.hydrate
            : widget.$dependencies.render
        )(View(widget), container);
      });
    },
    async unmount(widget) {
      mapViews(widget, viewFactory, ({ container }) => {
        if (container) {
          widget.$dependencies.unmountComponentAtNode(container);
        }
      });
    },
    async update(widget) {
      return mapViews(
        widget,
        viewFactory,
        ({ View, container }) =>
          container && widget.$dependencies.render(View(widget), container)
      );
    },
  });
}
Example #4
Source File: client.js    From react-keycloak-examples with MIT License 6 votes vote down vote up 
// 1. Wrap the App inside SSRKeycloakProvider
hydrate(
  <SSRKeycloakProvider
    keycloakConfig={getKeycloakConfig()}
    persistor={ClientPersistors.Cookies}
  >
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </SSRKeycloakProvider>,
  document.getElementById('root')
)
Example #5
Source File: render.js    From tunnel-tool with MIT License 6 votes vote down vote up 
render = ({
  App,
  watchers,
  reducers,
  urls: { graphql, events }
}) => {
  const { store, history } = configureStore({
    reducers,
    initState: window.__PRELOADED_STATE__
  });
  const client = configureGraph({
    url: graphql,
    initState: window.__APOLLO_STATE__
  });

  const AppRoot = () => {
    return (
      <ApolloProvider client={client}>
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </Provider>
        <ToastContainer />
        <SocketContainer client={client} events={events} />
      </ApolloProvider>
    );
  };

  hydrate(<AppRoot />, document.getElementById("root"));
}
Example #6
Source File: index.js    From react-myportfolio with MIT License 5 votes vote down vote up 
hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector("#root")
);
Example #7
Source File: main.js    From Full-Stack-React-Projects-Second-Edition with MIT License 5 votes vote down vote up 
hydrate(<App/>, document.getElementById('root'))
Example #8
Source File: index.js    From crate with MIT License 5 votes vote down vote up 
// Mount client app
window.onload = () => {
  hydrate(
    <Client/>,
    document.getElementById('app')
  )
}
Example #9
Source File: ClientApp.js    From citr-v6-project with Apache License 2.0 5 votes vote down vote up 
hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);
Example #10
Source File: client.js    From ReactCookbook-source with MIT License 5 votes vote down vote up 
hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
Example #11
Source File: index.client.js    From movies with MIT License 5 votes vote down vote up 
renderMethod = (process.env.RENDERING === 'server')
  ? hydrate
  : render
Example #12
Source File: index.js    From portfolio-react with MIT License 5 votes vote down vote up 
hydrate(
	<BrowserRouter>
		<App />
	</BrowserRouter>,
	document.getElementById('root')
)
Example #13
Source File: client.js    From littlelink-server with MIT License 5 votes vote down vote up 
hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);
Example #14
Source File: index.esm.js    From the-eye-knows-the-garbage with MIT License 5 votes vote down vote up 
function renderClient(opts) {
  var rootContainer = opts.plugin.applyPlugins({
    type: ApplyPluginsType.modify,
    key: 'rootContainer',
    initialValue: /*#__PURE__*/React.createElement(RouterComponent, {
      history: opts.history,
      routes: opts.routes,
      plugin: opts.plugin,
      ssrProps: opts.ssrProps,
      defaultTitle: opts.defaultTitle
    }),
    args: {
      history: opts.history,
      routes: opts.routes,
      plugin: opts.plugin
    }
  });

  if (opts.rootElement) {
    var rootElement = typeof opts.rootElement === 'string' ? document.getElementById(opts.rootElement) : opts.rootElement;

    var callback = opts.callback || function () {}; // flag showing SSR successed    


    if (window.g_useSSR) {
      if (opts.dynamicImport) {
        // dynamicImport should preload current route component
        // first loades);
        preloadComponent(opts.routes).then(function () {
          hydrate(rootContainer, rootElement, callback);
        });
      } else {
        hydrate(rootContainer, rootElement, callback);
      }
    } else {
      render(rootContainer, rootElement, callback);
    }
  } else {
    return rootContainer;
  }
}
Example #15
Source File: entry.client.jsx    From redis-examples with MIT License 5 votes vote down vote up 
hydrate(<RemixBrowser />, document);