How to use enum as props in React/TypeScript

Question

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?} />?

Titian Cernicova-Dragomir · Accepted Answer · 2018-04-10 06:21:03Z

62

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} />

answered Apr 10, 2018 at 6:21

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

blankface Over a year ago

do i need to redefine the enum again in the Component that's rendering Demo?

Titian Cernicova-Dragomir Over a year ago

No, you should be able to import from the module where you defined it as you would any other type

blankface Over a year ago

so something like import { Demo, Sizes} from "../src/Demo.tsx"; ?

blankface Over a year ago

but when i do SizeEnum.Small i dont get intellisense for small or large

blankface Over a year ago

it works if you get rid of the tsx from import { Demo, Sizes} from "../src/Demo.tsx

|

Gibolt · Accepted Answer · 2021-10-25 19:13:32Z

28

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

edited Oct 25, 2021 at 19:13

answered Aug 27, 2020 at 16:59

Gibolt

47.9k15 gold badges208 silver badges133 bronze badges

1 Comment

Fellow Stranger Over a year ago

Would be great with reference to the statement "... considered a bad and unreliable practice in typescript"?

Collectives™ on Stack Overflow

How to use enum as props in React/TypeScript

2 Answers 2

8 Comments

Use `type` or `as const`

type

as const

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Use type or as const

type

as const

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Use `type` or `as const`