reactjs - Cómo usar enum como props en React/TypeScript

Tengo la siguiente enumeración

export enum Sizes{
    Small,
    Large
}

que se está utilizando en la interfaz de props de mi componente <Demo/>:

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

Mi pregunta es, ¿cuándo uso esto <Demo Size={¿cómo defino el tamaño aquí?} />?

Respuesta #1

Puedes simplemente hacer referencia al valor del enum como lo harías en cualquier otro contexto:

export enum Sizes{
    Small,
    Large
}

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

class Demo extends React.Component<IProps> {}

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

Respuesta #2

Usa type o as const

Tanto type como as const tienen autocompletado y emitirán un error cuando se use un valor no válido.

tipo

'up'   

Implementar con:

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

interface IProps {
  Size: MyEnum
}

como const

MyEnum.Up    

Implementar con:

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 =...`
}

Más detalles sobre as const y congelación de parámetros