Better React Components

Roblox's ui elements, with builtin modifiers

Also see introduction

Example

better-react-components code

```
<Frame
    position={new UDim2(.5, 0, .5, 0)}
    size={new UDim2(.5, 0, .5, 0)}

    anchorPoint={AnchorPoints.Middle}
    cornerRadius={8}
    padding={4}
>
    <GridLayout
        cellSize={new UDim2(.25, 0, .25, 0)}
        cellPadding={new UDim2(0, 4, 0, 4)}
        cellAspectRatio={1}
    />

    <DummyElement />
    <Button
        textColor={"#64FEE7"}
        text="Hello world!"
    />
    <Text
        background={"#64FEE7"}
        text="Hello there!"
        font={Enum.Font.Arial}
    />
</Frame>;
```

Support

TODO

• Upgrade ESLint to 9.*.* version
• Better documentation

Components

• Frame
• ScrollableFrame
• Button
• ImageButton
• Image
• Text
• TextBox
• CanvasGroup

Modifiers

• UIAspectRatioConstraint
• UICorner
• UIGradient
• UIGridLayout (see GridLayout)
• UIListLayout (see ListLayout)
• UIFlexLayout (see ListLayout)
• UIPadding
• UIPageLayout
• UIScale
• UISizeConstraint
• UIStroke
• UITableLayout
• UITextSizeConstraint

Custom Modifiers

• [ ] FlowLayout (view) (Removed due release of flex features to ListLayout. Devforum )