@pixi/react-ui

[273032860]

pixi/ui add react

export const Pixitest = () => {
const blurFilter = useMemo(() => new BlurFilter(4), [])
const ref = useRef()

useEffect(() => {
const button = new ButtonContainer()

const buttonView = new Graphics().beginFill('#A5E24D').drawRoundedRect(0, 0, 150, 150, 150)
const text = new Test2('🤙', { fontSize: 70 })
text.anchor.set(0.5)
text.x = buttonView.width / 2
text.y = buttonView.height / 2

buttonView.addChild(text)

button.addChild(buttonView)
ref.current.addChild(button.view)
console.log('ref.current:', ref.current)
console.log('button:', button)

}, [])

return (

<Sprite
image="https://pixijs.io/pixi-react/img/bunny.png"
x={400}
y={270}
anchor={{ x: 0.5, y: 0.5 }}
/>

  <Container x={400} y={330} ref={ref}>
    {/* <Text text="Hello World" anchor={{ x: 0.5, y: 0.5 }} filters={[blurFilter]} /> */}
  </Container>
</Stage>

)
}

Cannot render correctly

[CyberDex]

@273032860 For react, it is probably worth to use just Button, not ButtonContainer. I am not familiar with react good enough but when we was preparing PixiUI to be integrated into https://github.com/pixijs/pixi-react we was discussing that container instance should be given to a component by react after the instance of the component itself is created. ButtonContainer is just a helper. Button should probably work as you expect. Otherwise you may go and check how is it integrated in https://github.com/pixijs/pixi-react