website·Indexed 29 days ago
https://reactunity.github.io/Technical reference for ReactUnity, featuring documentation on CSS properties, CSS rules (including media queries, nesting, and cascade layers), animations (such as scroll-driven and motion), and Material Components like buttons, dialogs, and virtual scrolls.
ReactUnity supports various CSS at-rules and syntax patterns to control how styles are applied, scoped, and prioritized. Key supported rules include:
@media: Applies styles based on screen, player, or device characteristics.@container: Applies styles based on an ancestor's size or style.@supports: Applies styles only if ReactUnity supports a specific property or value.@layer: Manages the cascade by ordering groups of rules independently of selector specificity.@scope: Limits the application of a block of styles to a specific subtree.Nesting: Allows rules to be nested inside other rules to avoid repeating selectors.@property: Registers custom properties to ensure var() calls have a consistent value.clip-path property clips an element and all its children to a specific shape. Unlike mask-image, clip-path changes the actual shape of the element, meaning pointer events (like clicks) that land outside the clipped area will pass through to elements behind it. All basic CSS shapes are supported, but url() pointing to an SVG <clipPath> is not supported..stage {
width: 300px;
height: 200px;
background-image: linear-gradient(135deg, gold, crimson);
clip-path: circle(45%);
}background-blend-mode property blends an element's background images and its background color together. Only the background is affected; borders, text, and child elements are painted over the result. To blend the entire element into the page (including its content), use mix-blend-mode instead..stage {
width: 300px;
height: 200px;
background-color: #202040;
background-image:
linear-gradient(120deg, gold, transparent 70%),
linear-gradient(20deg, deepskyblue, crimson);
background-blend-mode: multiply;
}@layer at-rule allows you to group CSS rules into named layers. The order of these layers determines which rules win, regardless of selector specificity. This is primarily used to prevent framework styles from overriding application-specific styles.@layer framework, app;
@layer framework {
#title {
color: white; /* High specificity, but in an earlier layer */
}
}
@layer app {
text {
color: red; /* Low specificity, but in a later layer; this wins */
}
}<view> component is the simplest container component and the fundamental building block of ReactUnity. It functions similarly to a div element in web development, allowing developers to group other components and apply layout styles such as padding and background colors.export default function App() {
return (
<view style={{
padding: 20,
backgroundColor: 'crimson',
color: 'white',
}}>
Hello world
</view>
);
};ReactUnity provides several mechanisms for animating elements and handling transitions, primarily leveraging CSS-like properties:
keyframes and the animation property.animation-timeline to drive keyframes based on scroll position or an element's passage through a scroll view instead of a clock.transition property to animate changes between property states.:enter and :leave pseudo-classes combined with the transition property to animate elements when they are inserted into or removed from the UI.motion property to animate changes specifically to the rect transform.audio property to trigger and play audio clips.width, height, inline-size, block-size, aspect-ratio, and orientation. They support min-/max- prefixes, range syntax, and logical operators (and, or, not). Lengths in conditions are resolved against the container's font size (e.g., 20em is 20x the container's font size).@container (min-width: 400px) { ... }
@container (width > 400px) { ... }
@container (400px <= width < 800px) { ... }
@container sidebar (orientation: portrait) { ... }
@container (aspect-ratio > 16/9) and (height >= 200px) { ... }
@container not (width < 300px) { ... }To use runtime UI backends in Unity, add the corresponding renderer component to a GameObject and configure it via the inspector:
ReactRendererUGUI component.ReactRendererUIToolkit component.Scroll-state queries require container-type: scroll-state.
scrollable: Checks if the container can still scroll towards specific edges (top, right, bottom, left, block-start, block-end, inline-start, inline-end), axes (x, y, inline, block), or none.stuck: Checks if a position: sticky box is currently stuck to an edge. The element with position: sticky must also have container-type: scroll-state./* Scrollable example */
scroll {
container-type: scroll-state;
}
@container scroll-state(scrollable: bottom) {
scroll .more-below { opacity: 1; }
}
/* Sticky/Stuck example */
.header {
position: sticky;
top: 0;
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.header .title { font-size: 14px; }
}Use the CSS :enter and :leave pseudo-selectors in combination with the transition property to create animations when elements are inserted into or removed from the DOM.
:enter: Applied when an element is inserted into the DOM.:leave: Applied when an element is removed from the DOM.state-duration: Use this property to control how long these pseudo-classes remain applied to the element..item {
flex-direction: row;
align-items: center;
transition: all 0.5s;
state-duration: 0.5s;
}
.item:enter {
state-duration: 0s;
translate: -100px 0;
opacity: 0;
}
.item:leave {
translate: 100px 0;
opacity: 0;
}<video> component is used to embed and play video content. It accepts a source prop which can be a URL string or a Video object. To control playback (Play/Pause), you can use a ref to access the underlying VideoPlayer object.import { useState, useEffect } from 'react';
export default function App() {
const videoAddress = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
const [videoRef, setVideoRef] = useState();
useEffect(() => {
if (videoRef) {
// Start playback when the component is ready
videoRef.VideoPlayer.Play();
}
}, [videoRef]);
const toggleVideo = () => {
const vp = videoRef.VideoPlayer;
if (vp.isPlaying) vp.Pause();
else vp.Play();
};
return <>
<video
style={{ objectFit: 'contain', width: 500 }}
source={videoAddress}
ref={setVideoRef}
onPointerClick={toggleVideo}
/>
</>;
}