react-dom/client#createRoot TypeScript Examples

The following examples show how to use react-dom/client#createRoot. 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: LegendQuery.tsx    From legend-studio with Apache License 2.0 6 votes vote down vote up 
async loadApplication(): Promise<void> {
    // Setup React application libraries
    await setupLegendApplicationUILibrary(this.pluginManager, this.logger);
    await setupLegendQueryUILibrary();

    // Render React application
    const rootElement = createRoot(getRootElement());
    rootElement.render(
      <BrowserRouter basename={this.baseUrl}>
        <WebApplicationNavigatorProvider>
          <ApplicationStoreProvider
            config={this.config}
            pluginManager={this.pluginManager}
          >
            <LegendQueryApplication
              config={this.config}
              pluginManager={this.pluginManager}
            />
          </ApplicationStoreProvider>
        </WebApplicationNavigatorProvider>
      </BrowserRouter>,
    );
  }
Example #2
Source File: index.tsx    From react-redux-boilerplate with Apache License 2.0 6 votes vote down vote up 
(async () => {
    const preloadedState = getPreloadedState();

    const root = createRoot(document.getElementById('root'));

    root.render(
        <React.StrictMode>
            <ReduxProvider store={configureAppStore(preloadedState)}>
                <AppContextProvider>
                    <DemoPage />
                </AppContextProvider>
            </ReduxProvider>
        </React.StrictMode>
    );
})();
Example #3
Source File: LegendStudio.tsx    From legend-studio with Apache License 2.0 6 votes vote down vote up 
async loadApplication(): Promise<void> {
    // Setup React application libraries
    await setupLegendStudioUILibrary(this.pluginManager, this.logger);

    // Render React application
    const rootElement = createRoot(getRootElement());
    rootElement.render(
      // TODO: would be great if we can have <React.StrictMode> here but since Mobx React is not ready for
      // concurrency yet, we would have to wait
      // See https://github.com/mobxjs/mobx/issues/2526
      <BrowserRouter basename={this.baseUrl}>
        <WebApplicationNavigatorProvider>
          <ApplicationStoreProvider
            config={this.config}
            pluginManager={this.pluginManager}
          >
            <LegendStudioApplication
              config={this.config}
              pluginManager={this.pluginManager}
            />
          </ApplicationStoreProvider>
        </WebApplicationNavigatorProvider>
      </BrowserRouter>,
    );
  }
Example #4
Source File: LegendTaxonomy.tsx    From legend-studio with Apache License 2.0 6 votes vote down vote up 
async loadApplication(): Promise<void> {
    // Setup React application libraries
    await setupLegendApplicationUILibrary(this.pluginManager, this.logger);
    await setupLegendQueryUILibrary();

    // Render React application
    const rootElement = createRoot(getRootElement());
    rootElement.render(
      <BrowserRouter basename={this.baseUrl}>
        <WebApplicationNavigatorProvider>
          <ApplicationStoreProvider
            config={this.config}
            pluginManager={this.pluginManager}
          >
            <LegendTaxonomyApplication
              config={this.config}
              pluginManager={this.pluginManager}
            />
          </ApplicationStoreProvider>
        </WebApplicationNavigatorProvider>
      </BrowserRouter>,
    );
  }
Example #5
Source File: main.tsx    From pintora with MIT License 6 votes vote down vote up 
function start() {
  const container = document.getElementById('root')
  if (container) {
    const root = createRoot(container)
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    )
  }
}
Example #6
Source File: index.tsx    From JoL-player with MIT License 6 votes vote down vote up 
toast = (option: toastType) => {
  const jolPlayerToast = document.querySelector('#jolPlayerToast');
  if (!jolPlayerToast) {
    const container = document.createElement('div');
    container.id = 'jolPlayerToast';
    document.querySelector('#JoL-player-container')!.appendChild(container);
    const root = createRoot(container);
    root.render(<Toast {...option} />);
  }
}
Example #7
Source File: index.tsx    From livekit-react with Apache License 2.0 5 votes vote down vote up 
root = createRoot(document.getElementById('root') as Element)
Example #8
Source File: index.tsx    From firebase-tools-ui with Apache License 2.0 5 votes vote down vote up 
root = createRoot(container!)
Example #9
Source File: index.tsx    From genshin-optimizer with MIT License 5 votes vote down vote up 
root = createRoot(container!)
Example #10
Source File: index.tsx    From gear-js with GNU General Public License v3.0 5 votes vote down vote up 
root = createRoot(container as HTMLElement)
Example #11
Source File: index.tsx    From gear-js with GNU General Public License v3.0 5 votes vote down vote up 
root = createRoot(container as HTMLElement)
Example #12
Source File: app.tsx    From flood with GNU General Public License v3.0 5 votes vote down vote up 
root = createRoot(container)
Example #13
Source File: app.tsx    From JoL-player with MIT License 5 votes vote down vote up 
root = createRoot(container)
Example #14
Source File: index.tsx    From flect-chime-sdk-demo with Apache License 2.0 5 votes vote down vote up 
root = createRoot(container)
Example #15
Source File: index.tsx    From meshtastic-web with GNU General Public License v3.0 5 votes vote down vote up 
root = createRoot(container)
Example #16
Source File: index.tsx    From mysterium-vpn-desktop with MIT License 5 votes vote down vote up 
root = createRoot(container)
Example #17
Source File: index.tsx    From Chromogen with MIT License 5 votes vote down vote up 
root = createRoot(document.getElementById('root') as HTMLElement)
Example #18
Source File: index.tsx    From contracts-ui with GNU General Public License v3.0 5 votes vote down vote up 
root = createRoot(container!)
Example #19
Source File: index.tsx    From payload with MIT License 5 votes vote down vote up 
root = createRoot(container)
Example #20
Source File: index.tsx    From fivem-react-boilerplate-lua with MIT License 5 votes vote down vote up 
root = createRoot(document.getElementById('root')!)
Example #21
Source File: index.tsx    From what-the-filter with MIT License 5 votes vote down vote up 
root = createRoot(container)
Example #22
Source File: Root.tsx    From react-pwa with MIT License 5 votes vote down vote up 
root = createRoot(container)
Example #23
Source File: index.tsx    From overwolf-modern-react-boilerplate with MIT License 5 votes vote down vote up 
root = createRoot(container!)
Example #24
Source File: description.tsx    From cloudmusic-vscode with MIT License 5 votes vote down vote up 
root = createRoot(document.getElementById("root")!)
Example #25
Source File: index.tsx    From firecms with MIT License 5 votes vote down vote up 
root = createRoot(container as any)
Example #26
Source File: index.tsx    From shippo with MIT License 5 votes vote down vote up 
root = createRoot(container)
Example #27
Source File: index.tsx    From THREE-CustomShaderMaterial with MIT License 5 votes vote down vote up 
root = createRoot(container!)
Example #28
Source File: popup-page.tsx    From wereader with MIT License 5 votes vote down vote up 
createRoot(document.getElementById('popup-container')!).render(<Popup/>);
Example #29
Source File: index.tsx    From master-frontend-lemoncode with MIT License 5 votes vote down vote up 
root = createRoot(document.getElementById("root"))