pixi-fusion/dist/src/layer/Layer.js

This module offers a set of common components needed for playing games.

import React, { useCallback, useContext, useEffect, useMemo } from "react";
import { Container } from "pixi.js";
import { StageContext } from "../stage/Stage.context";
import { LayerContext } from "./Layer.context";
export const Layer = ({ options, children }) => {
    const { addObject: addObjectIntoStage, removeObject: removeObjectFromStaeg } = useContext(StageContext);
    const { addObject: addObjectIntoParent, removeObject: removeObjectFromParent } = useContext(LayerContext);
    const container = useMemo(() => {
        return new Container(options);
    }, [options]);
    useEffect(() => {
        if (addObjectIntoParent) {
            addObjectIntoParent(container);
            return () => {
                removeObjectFromParent(container);
            };
        }
        addObjectIntoStage(container);
        return () => {
            removeObjectFromStaeg(container);
        };
    }, [container?.uid]);
    const addObject = useCallback((thing) => {
        container.addChild(thing);
    }, [container?.uid]);
    const removeObject = useCallback((thing) => {
        container.removeChild(thing);
    }, [container?.uid]);
    const conextValue = useMemo(() => ({
        addObject,
        removeObject
    }), [container?.uid]);
    return React.createElement(LayerContext.Provider, { value: conextValue }, children);
};