Skip to Content
⚠️ Neuron is our internal UI component library. For internal use only.
DocumentationComponentsView

View


Description of the image

View is a container component for laying out other components. It replaces Roblox’s Frame and CanvasGroup and is analogous to a <div> on the web. In addition to basic layout, View supports advanced features like state updates, aspect ratios, padding, corner radii, flex properties, and more.

How to Use

In most cases, simply swap out your Frame or CanvasGroup with View. Note that some properties have been put into tables to improve structure and compatibility with style tokens. It also automatically selects the best underlying engine component:

  • CanvasGroup: Used when GroupTransparency is set.
  • ImageButton: Chosen when the component is interactable (i.e. when you pass onActivated or onStateChanged).
  • Frame: Otherwise.

View also integrates with our style system using tailwind-style tags and design tokens, and supports state updates via the onStateChanged callback for hover, press, select, and other interactions.

⚠️
Warning

Performance Notice

Do not declare the onStateChanged callback inline.

For functional components, wrap it in useCallback and minimize dependencies. In class components, declare it in the Init function. Use bindings wherever possible to reduce re-renders.

Example

local Neuron = require(Packages.Neuron)
local View = Neuron.View
...
 
local onStateChanged = React.useCallback(function(state)
    print("View state changed", state)
end, {})
 
return React.createElement(View, {
    onStateChanged = onStateChanged,
    tag = "row align-y-center padding-small",
}, {
    ...
})

Supported Features

  • Style Tags: Customize appearance using utility tags.
  • State Updates: Listen to interaction events with onStateChanged and onActivated.
  • Dynamic Engine Selection: Automatically selects CanvasGroup, ImageButton, or Frame based on props.
  • Layout Helpers: Supports aspect ratios, padding, flex items, and list layouts.
  • Visual Enhancements: Options for corner radius, scale, stroke, and stateLayer (for interactive feedback).

Additional Details

  • Engine Component Selection:
    View dynamically selects its underlying engine component:

    • Uses CanvasGroup if GroupTransparency is provided.
    • Switches to ImageButton if interaction callbacks (onActivated or onStateChanged) are set. Note that interaction and GroupTransparency are mutually exclusive.
    • Defaults to Frame otherwise.

  • StateLayer & Interaction:
    The stateLayer prop accepts an object defining:

    • affordance: Which part of the component (e.g., "Background" or "Border") should provide interactive feedback.

    • mode: The style mode (e.g., "Default", "Light", "Dark", or "Inverse") that tailors the visual response.

    Important: Avoid setting the affordance to None. Interactive feedback is essential for a good user experience.

  • Styling Integration:
    View leverages our tailwind-style tag system (via the tag prop) along with design tokens and Roblox’s Stylesheet API, ensuring consistent styling across components.

Last updated on
Tile