microfront-store v1.0.2

Microfront-store

A utility package to share states between multiples micro-frontends

Install

npm i microfront-store

yarn add microfront-store

Example

Host

export const Host = () => {
    return (
        <>
            <h1>Host</h1>
            <MicrofrontendA />
            <MicrofrontendB />
        </>
    )
}

Microfrontend A

import React from "react"
import { useSharedState } from "microfront-store"

export const MicrofrontA = () => {
    const [sharedState1, setSharedState1] = useSharedState(
        "shared_state_name_1"
    );
    const [sharedState2, setSharedState2] = useSharedState(
        "shared_state_name_2",
        {
            id: null,
            name: "",
        }
    );

    const id = 1;

    return (
        <>
            <h1>Microfront A</h1>
            <input
                placeholder="Shared state 1"
                value={sharedState1}
                onChange={(e) => setSharedState1(e.target.value)}
            />
            <input
                placeholder="Shared state 2"
                value={sharedState2.name}
                onChange={(e) => {
                    setSharedState2({ name: e.target.value, id });
                }}
            />
        </>
    );
};

Microfrontend B

import React from "react"
import { useSharedState } from "microfront-store"

export const MicrofrontB = () => {
    const [sharedState1] = useSharedState("shared_state_name_1");
    const [sharedState2] = useSharedState("shared_state_name_2", {
        id: null,
        name: "",
    });

    return (
        <>
            <h1>Microfront B</h1>
            <p>Shared state 1: {sharedState1}</p>
            <p>
                Shared state 2: #{sharedState2.id} - {sharedState2?.name}
            </p>
        </>
    );
};