Pixi’VNReact UI
What is React? React is a JavaScript library that helps developers create user interfaces (UIs) for websites, apps, and more. It's free and open-source, and is maintained by Meta (formerly Facebook) and a community of developers.
You can learn more about React on the React website.
How add Pixi’VN to a React application
React template
There are some Pixi’VN templates available that use React. You can read more about them in the templates section.
Instead if you want to add Pixi’VN to an existing React application, you can follow the steps below.
First of all you need to have a React application and install pixi-vn. Is recommended to use Vite to create a new React application.
Now you can replace the content of following files with the code below:
import { canvas, Container, RotateTicker, showImage } from '@drincs/pixi-vn'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
const body = document.body;
if (!body) {
throw new Error("body element not found");
}
canvas
.initialize(body, {
height: 1080,
width: 1920,
backgroundColor: "#303030",
})
.then(() => {
// Pixi.JS UI Layer
canvas.addLayer("ui", new Container());
showImage(
"juliette",
"https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-icon.webp?alt=media&token=cbcdd613-12e4-48b5-b7b3-16443b4e125e",
{ xAlign: 0.9, yAlign: 0.1, anchor: 0.5 }
);
canvas.addTicker("juliette", new RotateTicker({ speed: 1 }));
// React setup with ReactDOM
const root = document.getElementById("root");
if (!root) {
throw new Error("root element not found");
}
const htmlLayer = canvas.addHtmlLayer("ui", root, {
position: "absolute",
pointerEvents: "none"
});
if (!htmlLayer) {
throw new Error("htmlLayer not found");
}
const reactRoot = createRoot(htmlLayer);
reactRoot.render(
<StrictMode>
<App />
</StrictMode>,
);
}
) Best React component libraries
To create a beautiful user interface you can use some of the best React UI component libraries: