roblox-ts•5d ago

How to use default values for props in rbxts/React?

Am I properly specifying default values for props in this case? Is the "={}" in the signature necessary?

Solution:

or ```ts interface ICardUiProps{ Size?: UDim2; ...

Jump to solution

10 Replies

Tester•5d ago

are you using .tsx file? it's usually

export function CardUi({
  Size = UDim2.fromOffset(10000, 150), 
  Position = UDim2.fromScale(.5, .5)
}: {
  Size?: UDim2; 
  Position?: UDim2
}){
  return (
    <frame Size={Size} Position={Position}>
      <uistroke Thickness={2} Color={new Color3()}/>
      <UiCorner CornerRadius={new UDim(0.06)}/>
    </frame>
  )
}

export function CardUi({
  Size = UDim2.fromOffset(10000, 150), 
  Position = UDim2.fromScale(.5, .5)
}: {
  Size?: UDim2; 
  Position?: UDim2
}){
  return (
    <frame Size={Size} Position={Position}>
      <uistroke Thickness={2} Color={new Color3()}/>
      <UiCorner CornerRadius={new UDim(0.06)}/>
    </frame>
  )
}

isnt that cleaner?

Solution

Tester•5d ago

interface ICardUiProps{
  Size?: UDim2; 
  Position?: UDim2
}
export function CardUi({
  Size = UDim2.fromOffset(10000, 150), 
  Position = UDim2.fromScale(.5, .5)
}: ICardUiProps){
  return (
    <frame Size={Size} Position={Position}>
      <uistroke Thickness={2} Color={new Color3()}/>
      <UiCorner CornerRadius={new UDim(0.06)}/>
    </frame>
  )
}

interface ICardUiProps{
  Size?: UDim2; 
  Position?: UDim2
}
export function CardUi({
  Size = UDim2.fromOffset(10000, 150), 
  Position = UDim2.fromScale(.5, .5)
}: ICardUiProps){
  return (
    <frame Size={Size} Position={Position}>
      <uistroke Thickness={2} Color={new Color3()}/>
      <UiCorner CornerRadius={new UDim(0.06)}/>
    </frame>
  )
}

RennieOP•5d ago

jesus i am. Thank you wait

Tester•5d ago

.tsx and import React

Tester•5d ago

and in ts config dont forget

RennieOP•5d ago

Ok so basing off of what you said

interface CardProps {
    Size?: UDim2; 
    Position?: UDim2
    ImageId? : String,
    OnHover? : (isHovering: Boolean) => void,
    onClick? : () => void,
}

export function Card({
    Size = UDim2.fromOffset(100, 150),
    Position =  new UDim2(0.5,0, 0.5,0),
    ImageId = "140128268738835",
    onHover = (isHovering : Boolean) => {}  ,
    onClick = () => {},
} : CardProps

interface CardProps {
    Size?: UDim2; 
    Position?: UDim2
    ImageId? : String,
    OnHover? : (isHovering: Boolean) => void,
    onClick? : () => void,
}

export function Card({
    Size = UDim2.fromOffset(100, 150),
    Position =  new UDim2(0.5,0, 0.5,0),
    ImageId = "140128268738835",
    onHover = (isHovering : Boolean) => {}  ,
    onClick = () => {},
} : CardProps

Would the callbacks also be captial according to the style guide Also do you have any reference code/guide I could look at. I hate to have to ask what would be simple questions

Tester•5d ago

Oh you better not use my style guide 🫠, it's Very specific and very far from standard Or if you just want to experiment, sure Style Guidelines When contributing to this project, please adhere to the following style conventions: Naming Conventions Functions - Use PascalCase for all functions (both private and public)

function DoSomething() { ... }

function DoSomething() { ... }

Variables - Use snake_case for local variables

function Test(some_variable: number) {
        const some_variable_2 = "test";
}

function Test(some_variable: number) {
        const some_variable_2 = "test";
}

- Use PascalCase for public variables or variables that are getting exported (in classes, namespaces and global space) - Use bullet_case_ for private variables in classes Classes - Use PascalCase for public and private functions in classes Interfaces & Enums - Interfaces are ALWAYS prefixed with I

interface IUser { ... }

interface IUser { ... }

- Enums are ALWAYS prefixed with E

enum EDirection { ... }

enum EDirection { ... }

- Since variables in interfaces are public, always use PascalCase for them

interface IUser {
        FirstName: string;
        LastName: string;
}

interface IUser {
        FirstName: string;
        LastName: string;
}

Constants - Constants are ALWAYS using CONSTANT_CASE

const MAX_USERS = 100;

const MAX_USERS = 100;

Code Structure - Prefer creating nested functions using variables

function MainFunction() {
        const SubFunction = () => {
                // ...Do something
        };
}

function MainFunction() {
        const SubFunction = () => {
                // ...Do something
        };
}

Examples:

const PascalCase;
const CONSTANT_CASE;
const snake_case;
const bullet_case_;

const PascalCase;
const CONSTANT_CASE;
const snake_case;
const bullet_case_;

And my class usually looks like this

class Item{
Name: string;
private id_: string
public GetId(){
  return this.id_
}

}

class Item{
Name: string;
private id_: string
public GetId(){
  return this.id_
}

}

RennieOP•5d ago

Thank you 🤗

PepeElToro41•5d ago

that's the most insane style guideline I've seen you could rehabilitate by going full snake_case

Tester•4d ago

Hell nah

Gaming

Programming

How to use default values for props in rbxts/React?

Did you find this page helpful?