use-luigi v1.0.5

Use-Luigi

This is a collection of hooks / utilities to use in a Luigi (https://luigi-project.io/) micro-frontend application. Any pull request for optimisations and new additions is more than welcome.

Installing use-luigi

npm install use-luigi

Usage

Navigate to a route and synchronise with Luigi

• This will trigger a refresh of the iframe

import { navigateWithSync } from 'use-luigi';

const Component = () => (
  <button onClick={() => navigateWithSync('/pathname')}>
    Navigate
  </button>
);

Navigate to a route without synchronising with Luigi

• This will not trigger a refresh of the iframe

import { navigateWithoutSync } from 'use-luigi';

const Component = () => (
  <button onClick={() => navigateWithoutSync('/pathname')}>
    Navigate
  </button>
);

Configure a React app to update Luigi route every time when the internal location path is changing

• This is an operation that should be done once per application.

import { useSyncRoute } from 'use-luigi';

const App = () => {
  useSyncRoute();
  
  return (...);
}

Use Luigi context

import { useContext } from 'use-luigi';

const Component = () => {
  const context = useContext();
  
  return (...);
}

Authentication from a micro-frontend

Add this to root Luigi config object:

{
  communication: {
    customMessagesListeners: {
      'authentication.login': () => {
        (global as any).Luigi.auth().login();
      },
      'authentication.logout': () => {
        (global as any).Luigi.auth().logout();
      },
    },
  },
}

import { login, logout } from 'use-luigi';

const Component = () => (
  <>
    <button onClick={login}>
      Login
    </button>
    <button onClick={logout}>
      Logout
    </button>
  </>
);