How to use the react-pixi-fiber.CustomPIXIComponent function in react-pixi-fiber

Text,
  TilingSprite,
  CustomPIXIComponent
} from 'react-pixi-fiber';

const anchor = new PIXI.ObservablePoint(() => {}, undefined, 0.5, 0.5);

const texture = PIXI.Texture.fromImage('https://i.imgur.com/IaUrttj.png');

const CompositionExample: React.SFC = () => (
  
    
  
);

const AnimatedSprite: React.ReactType = CustomPIXIComponent({
  customDisplayObject: (props: any) => new PIXI.extras.AnimatedSprite(props.textures),
  customApplyProps: (animatedSprite: PIXI.extras.AnimatedSprite, oldProps: any, newProps: any) => {},
  customDidAttach: (animatedSprite: PIXI.extras.AnimatedSprite) => {},
  customWillDetach: (animatedSprite: PIXI.extras.AnimatedSprite) => {},
}, 'AnimatedSprite');
const CustomPIXIComponentExample: React.SFC = () => ;

const StageExample: React.SFC = () => (

customDisplayObject: props => new PIXI.Graphics(),
  customApplyProps: function(instance, oldProps, newProps) {
    const { fill, x, y, width, height, ...newPropsRest } = newProps;
    const { fill: oldFill, x: oldX, y: oldY, width: oldWidth, height: oldHeight, ...oldPropsRest } = oldProps;
    if (typeof oldProps !== "undefined") {
      instance.clear();
    }
    instance.beginFill(fill);
    instance.drawRect(x, y, width, height);
    instance.endFill();

    this.applyDisplayObjectProps(oldPropsRest, newPropsRest);
  },
};

export default CustomPIXIComponent(behavior, TYPE);

import React, { Component, Fragment } from 'react';
import { Container, Text } from 'react-pixi-fiber';
import Box from 'Client/Components/Box';
import FlatButton from 'Client/Components/FlatButton';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { CustomPIXIComponent } from 'react-pixi-fiber';
import * as PIXI from "pixi.js";

const Triangle = CustomPIXIComponent({
    customDisplayObject: () => new PIXI.Graphics(),
    customApplyProps: (instance, oldProps, newProps) => {
        const { color, x, y } = newProps;
        instance.clear();
        instance.beginFill(color||0x0);
        instance.moveTo(x, y);
        instance.lineTo(x, y + 16);
        instance.lineTo(x + 16, y);
        instance.lineTo(x, y);
        instance.endFill();
    },
}, 'Triangle');

const textStyle = {
    fill: 0xFFFFFF,
    fontSize: 15,

const AnimatedContainer = Animated.createAnimatedComponent(Container);
const AnimatedFlatButton = Animated.createAnimatedComponent(FlatButton);
const AnimatedStageDisplay = Animated.createAnimatedComponent(StageDisplay);

const stageButtonPositions = [
    [320, 816], [432, 694], [580, 586], [670, 502], [784, 430],
    [916, 368], [1110, 348], [1270, 234], [1424, 216], [1570, 306],
    [1504, 420], [1338, 542], [1534, 538], [1744, 586], [1484, 686],

    [218, 746], [370, 700], [502, 600], [516, 478], [678, 404],
    [750, 306], [1048, 280], [1220, 286], [1376, 276], [1482, 342],
    [1540, 460], [1610, 554], [1472, 602], [1380, 656], [1522, 778],
]

const SideButton = CustomPIXIComponent({
    customDisplayObject: () => new PIXI.Graphics(),
    customApplyProps: (instance, oldProps, newProps) => {
        const { x, y } = newProps;
        instance.clear();
        instance.beginFill(0x0);
        instance.moveTo(x, y - 60);
        instance.lineTo(x, y + 60);
        if(newProps.reverse) instance.lineTo(x + 40, y);
        else instance.lineTo(x - 40, y);
        instance.lineTo(x, y - 60);
        instance.endFill();
        instance.alpha = 0.5;
    },
}, 'SideButton');

class StageSelectUI extends Component {

import { CustomPIXIComponent } from 'react-pixi-fiber';
import * as PIXI from "pixi.js";

export default CustomPIXIComponent({
    customDisplayObject: () => new PIXI.Graphics(),
    customApplyProps: (instance, oldProps, newProps) => {
        const { color, x, y, width, height, alpha } = newProps;
        instance.clear();
        if(newProps.borderColor) instance.lineStyle(2, newProps.borderColor, 1);
        instance.beginFill(color||0x0);
        instance.drawRect(x||0, y||0, width||0, height||0);
        instance.endFill();
        instance.alpha = alpha||1;
    },
}, 'Box');

customDisplayObject: props => new PIXI.Graphics(),
  customApplyProps: function(instance, oldProps, newProps) {
    const { fill, x, y, radius, ...newPropsRest } = newProps;
    const { fill: oldFill, radius: oldRadius, ...oldPropsRest } = oldProps;
    if (typeof oldProps !== "undefined") {
      instance.clear();
    }
    instance.beginFill(fill);
    instance.drawCircle(x, y, radius);
    instance.endFill();

    this.applyDisplayObjectProps(oldPropsRest, newPropsRest);
  },
};

export default CustomPIXIComponent(behavior, TYPE);

draggedObject.position.y += e.data.originalEvent.movementY;
      if (typeof instance.onDragMove === "function") instance.onDragMove(instance);
    };

    instance.on("mousedown", this.dragStart);
    instance.on("mouseup", this.dragEnd);
    instance.on("mousemove", this.dragMove);
  },
  customWillDetach: instance => {
    instance.off("mousedown", this.dragStart);
    instance.off("mouseup", this.dragEnd);
    instance.off("mousemove", this.dragMove);
  },
};

export default CustomPIXIComponent(behavior, TYPE);

return stage;
  },
  customDidAttach: instance => {
    const updateStage = () => {
      instance.updateStage();
      instance._updateStageRafId = window.requestAnimationFrame(updateStage);
    };
    updateStage();
  },
  customWillDetach: instance => {
    window.cancelAnimationFrame(instance._updateStageRafId);
    instance.destroy();
  },
};

export default CustomPIXIComponent(behavior, TYPE);

import { CustomPIXIComponent } from "react-pixi-fiber";
import * as PIXI from "pixi.js";

const PARTICLE = "Particle";
export const behavior = {
  customDisplayObject: props => new PIXI.Sprite(props.texture),
  customApplyProps: function(instance, oldProps, newProps) {
    if (Object.keys(oldProps).length !== 0) {
      return;
    }

    this.applyDisplayObjectProps(oldProps, newProps);
  },
};
export default CustomPIXIComponent(behavior, PARTICLE);