Skip to content

Latest commit

 

History

History
116 lines (95 loc) · 2.17 KB

1_Introduction.md

File metadata and controls

116 lines (95 loc) · 2.17 KB

Introduction

Introduction • Modifiers • Components • Custom Components

Important

Documentation is still in development. Best way to learn it – check out source code

Also see Hoarcekat stories at /stories

Why?

This package can help You with Roblox's UI Modifiers

Before:

<frame
	Position={new UDim2(.5, 0, .5, 0)}
	Size={new UDim2(.5, 0, .5, 0)}
	AnchorPoint={new Vector2(.5, .5)}
>
	<uigridlayout
		CellSize={new UDim2(.25, 0, .25, 0)}
		CellPadding={new UDim2(0, 4, 0, 4)}
	>
		<uiaspectratioconstraint AspectRatio={1} />
	</uigridlayout>

	<frame />
	<frame />
	<frame />
</frame>;

After:

<Frame
	position={new UDim2(.5, 0, .5, 0)}
	size={new UDim2(.5, 0, .5, 0)}
	anchorPoint={"m"} // m - middle
	// or anchorPoint={AnchorPoints.Middle}
	// or anchorPoint={new Vector2(.5, .5)}
>
	<GridLayout
		cellSize={new UDim2(.25, 0, .25, 0)}
		cellPadding={new UDim2(0, 4, 0, 4)}
		cellAspectRatio={1}
	/>

	<frame />
	<frame />
	<frame />
</Frame>

Installation

Tip

Use this @rbxts/react template

# install with any package manager:
npm install @rbxts/better-react-components
yarn add @rbxts/better-react-components
pnpm add @rbxts/better-react-components

Usage:

// import any component
import { Frame, Text } from "@rbxts/better-react-components";

...

// and use it!
return (
	<Frame>
		<Text text="Hello world!" />
	</Frame>
);
...

Unusual behaviours

  1. Borders are disabled by default. Also, components use UIStroke instead of border properties 
    {/* no borders: */}
<Frame> 
   ...
</Frame>

{/* red borders: */}
<Frame 
 border={Color3.fromHex("#FF0000")}
 borderSize={1}
> 
   ...
</Frame>

{/* attributes to UIStroke: */}
<Frame stroke={{...}}> 
   ...
</Frame>