Use TypeScript Enum with PropTypes to define React Component props

Question

I have the Component and I use TypeScript Interface to define its props:

interface Props {
    headerType: DROPDOWN_MENU_TYPE, //DROPDOWN_MENU_TYPE is enum
    headerContent: SVGClass
    isReverse: boolean;
};

const MyComp: React.FunctionComponent<Props> = () => {};

Then I use PropTypes to validate its props in runtime:

DropDownMenu.propTypes = {
    headerType: PropTypes.oneOf(DROPDOWN_MENU_TYPE), //error here
    headerContent: PropTypes.instanceOf(SVGClass),
    isReverse: PropTypes.bool
};

And I got this error:

Argument of type 'typeof DROPDOWN_MENU_TYPE' is not assignable to parameter of type 'readonly DROPDOWN_MENU_TYPE[]'.

Type 'typeof DROPDOWN_MENU_TYPE' is missing the following properties from type 'readonly DROPDOWN_MENU_TYPE[]': length, concat, join, slice, and 16 more.

How can I use TypeScript enum with PropTypes? And how can I solve this error?

Tomas B · Accepted Answer · 2020-09-22 16:50:45Z

3

You can try

const DropdownMenuType = PropTypes.oneOf(
  Object.values(DROPDOWN_MENU_TYPE) as DROPDOWN_MENU_TYPE[]
);

DropDownMenu.propTypes = {
  headerType: DropdownMenuType,
  ...
};

Works for me whenever I need to validate against enums.

answered Sep 22, 2020 at 16:50

Tomas B

311 silver badge3 bronze badges

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

Comments

Qwertiy · Accepted Answer · 2020-09-22 17:00:47Z

0

If your enum has numeric values and you want to pass such values, try

headerType: PropTypes.oneOf(
  Object.values(DROPDOWN_MENU_TYPE).filter(x => typeof x === 'number')
)

answered Sep 22, 2020 at 17:00

Qwertiy

21.9k17 gold badges69 silver badges143 bronze badges

Collectives™ on Stack Overflow

Use TypeScript Enum with PropTypes to define React Component props

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related