CODEWITHSUNDEEP
reactjstypescriptenums
blankface
blankface

Reputation: 6347

How to use enum as props in React/TypeScript

I have the following enum

export enum Sizes{
    Small,
    Large
}

which is getting used in my <Demo/> component's props interface:

export interface IProps{
    Label?: string;
    Size: SizeEnum;
}

My question is, when I use this <Demo Size={how do i define size here?} />?

Upvotes: 46

Views: 161288

Answers (2)

Gibolt
Gibolt

Reputation: 47297

Use type or as const

Both type and as const have auto-fill and will complain when an invalid value is used.

type

'up'

Implement with:

type MyEnum = 'up' | 'down' | 'left' | 'right'

interface IProps {
  Size: MyEnum
}

as const

MyEnum.Up

Implement with:

const MyEnum = {
  Up: 'up',
  Down: 'down',
  Left: 'left',
  Right: 'right',
} as const

type MyEnum = typeof MyEnum[keyof typeof MyEnum]

// Example type
interface IProps {
  Size: MyEnum // string, without line `type MyEnum =...`
}

More detail on as const and freezing parameters

Upvotes: 28

Titian Cernicova-Dragomir
Titian Cernicova-Dragomir

Reputation: 250396

You can just reference the enum value as you would in any other context: 

export enum Sizes{
    Small,
    Large
}

export interface IProps{
    Label?: string;
    Size: Sizes;
}

class Demo extends React.Component<IProps> {}

let d = <Demo Size={Sizes.Large} />

Upvotes: 61

Related Questions