Pixi slider component for React

react-pixi-slider-background.js

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

const TYPE = 'Background'
export const behavior = {
  customDisplayObject: props => new PIXI.Graphics(),
  customApplyProps: function(instance, oldProps, newProps) {
    const { fill, x, y, width, height, onClick } = newProps
    const onPointerDown = event => {
      onClick(event.data.getLocalPosition(instance.parent))
    }
    instance.clear()
    instance.beginFill(fill)
    instance.drawRect(x, y, width, height)
    instance.endFill()
    instance.interactive = true
    instance.buttonMode = true
    instance.on('pointerdown', onPointerDown)
  },
}
export default CustomPIXIComponent(behavior, TYPE)