React Singletons

React Singletons brings the singleton pattern to React components. This module allows applications to create components that live outside of your application with shared states for popups and overlays.

≪ Installation · Documentation · License ≫

Hi! My name is Jeffrey Lanters, thanks for checking out my modules! I've been a Game and Web developer for years when in 2020 I decided to start sharing my modules by open-sourcing them. So feel free to look around. If you're using this module for production, please consider donating to support the project. When using any of the packages, please make sure to Star this repository and give credit to Jeffrey Lanters somewhere in your app or game.

≪ Made with ♥ by Jeffrey Lanters ≫

Installation

Install React-Singletons using the Node Package Manager, the package is available natively or for both Babel and TypeScript compilers.

$ npm install react-singletons

Documentation

To get started import the Singleton component from react-singletons. Then instead of exporting your component. Wrap and export it into a Singleton as shown below.

Example usage

The example usign is using props and TypeScript, but both are not required.

import * as React from "react";
import { Component, ReactNode } from "react";
import { Singleton } from "react-singletons";

interface IProps {
  title: string;
}

export const Popup = new Singleton<IProps>(
  class extends Component<IProps, {}> {
    public render(): ReactNode {
      return <div>Popup {this.props.title}!</div>;
    }
  }
);

import { Popup } from "./Popup";

Popup.mount({ title: "Hello!" });
Popup.mount({ title: "Hello!" });

Popup.update({ title: "Bye!" });
Popup.update({ title: "Bye!" }, 1000); // delay(ms)

Popup.unmount();
Popup.unmount(1000); // delay(ms)

// All events are chainable
Popup.mount({ title: "Hello!" }).update({ title: "Bye!" }, 1000).unmount(2000);