How to use enum as props in react/typescript
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} />
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