How to use single-spa-react - 10 common examples

To help you get started, we’ve selected a few single-spa-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github CanopyTax / single-spa-examples / src / navbar / navbar.app.js View on Github external
import singleSpaReact from 'single-spa-react';
import navbar from './navbar.component.js';

/* The navbar app is an app that is always active and is responsible for showing the top navbar.
 * It is written in React and does not even use a router like react-router since it doesn't really
 * care about what the url is -- it just shows the menu items regardless. If we wanted to have an active
 * state for the menu item that is active, then we would need to either add in a hashchange listener or
 * a router like react-router.
 *
 * This app runs concurrently with any and all apps that are also active. It resides in its own <div>
 * and renders its content fixed to the page.
 *
 * This app is intended to show how simple a single-spa application can be.
 */

const reactLifecyles = singleSpaReact({
  React,
  ReactDOM,
  domElementGetter,
  rootComponent: navbar,
});

export const bootstrap = [
  reactLifecyles.bootstrap,
];

export const mount = [
  reactLifecyles.mount,
];

export const unmount = [
  reactLifecyles.unmount,
github alocke12992 / single-spa-starting-from-scratch / src / navBar / navBar.app.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import NavBar from './root.component.js';

export const navBar = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: NavBar,
  domElementGetter,
})

// Finally, we specify the location we want single-spa to mount our application
function domElementGetter() {
  return document.getElementById("navBar")
}
github pingcap / tidb-dashboard / ui / src / apps / searchLogs / app.js View on Github external
import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import RootComponent from './RootComponent.js'

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: RootComponent,
  domElementGetter,
})

export const bootstrap = [reactLifecycles.bootstrap]
export const mount = [reactLifecycles.mount]
export const unmount = [reactLifecycles.unmount]

function domElementGetter() {
  return document.getElementById('__spa_content__')
}
github spaxjs / spax / examples / demo-single-spa / src / app3 / app3.tsx View on Github external
import * as React from "react";
import * as ReactDOM from "react-dom";
import singleSpaReact, { Lifecycles } from "single-spa-react";
import Root from "./root.component";

/**
 * 同步模式
 */

const reactLifecycles: Lifecycles = singleSpaReact({
  React,
  ReactDOM,
  loadRootComponent: () => Root as any,
  suppressComponentDidCatchWarning: true,
});

export function bootstrap(props) {
  return reactLifecycles.bootstrap(props);
}

export function mount(props) {
  return reactLifecycles.mount(props);
}

export function unmount(props) {
  return reactLifecycles.unmount(props);
github spaxjs / spax / examples / demo-single-spa / src / app1 / app1.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Root from './root.component.js';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
});

export function bootstrap(props) {
  return reactLifecycles.bootstrap(props);
}

export function mount(props) {
  return reactLifecycles.mount(props);
}

export function unmount(props) {
  return reactLifecycles.unmount(props);
}
github pingcap / tidb-dashboard / ui / src / apps / keyvis / app.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import RootComponent from './RootComponent.tsx';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: RootComponent,
  domElementGetter,
});

export const bootstrap = [
  reactLifecycles.bootstrap,
];
export const mount = [
  reactLifecycles.mount,
];
export const unmount = [
  reactLifecycles.unmount,
];
github joeldenning / simple-single-spa-webpack-example / src / app1 / app1.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Root from './root.component.js';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  domElementGetter,
});

export function bootstrap(props) {
  return reactLifecycles.bootstrap(props);
}

export function mount(props) {
  return reactLifecycles.mount(props);
}

export function unmount(props) {
  return reactLifecycles.unmount(props);
github pingcap / tidb-dashboard / ui / src / layout / main / index.js View on Github external
import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import RootComponent from './RootComponent.js'

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: RootComponent,
  domElementGetter,
})

export const bootstrap = [reactLifecycles.bootstrap]
export const mount = [reactLifecycles.mount]
export const unmount = [reactLifecycles.unmount]

function domElementGetter() {
  return document.getElementById('root')
}
github alocke12992 / single-spa-starting-from-scratch / src / home / home.app.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Home from './root.component.js';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Home,
  domElementGetter,
})

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
github pingcap / tidb-dashboard / ui / lib / utils / registry.ts View on Github external
static newReactSpaApp = function (rootComponentAsyncLoader, targetDomId) {
    const reactLifecycles = singleSpaReact({
      React,
      ReactDOM,
      loadRootComponent: async () => {
        const component = await rootComponentAsyncLoader()
        if (component.default) {
          return component.default
        }
        return component
      },
      domElementGetter: () => document.getElementById(targetDomId),
    })
    return {
      bootstrap: [reactLifecycles.bootstrap],
      mount: [reactLifecycles.mount],
      unmount: [reactLifecycles.unmount],
    }

single-spa-react

Single-spa lifecycles helper for React apps

MIT
Latest version published 3 months ago

Package Health Score

78 / 100
Full package analysis

Popular single-spa-react functions

Popular JavaScript code snippets

Find secure code to use in your application or website