React PropTypes - Allow only one of objects values?

Question

Consider having a key and value map object like below:

export const PlaceholderVisibility = {
  Always: undefined,
  Never: null,
  OnFocus: true,
  OnBlur: false
}

How would you use PropTypes to only allow values specified in the existing object?

Here is what I tried:

import PropTypes from 'prop-types';
export const myTypes = {
  // ...
  visibility: PropTypes.oneOf(PlaceholderVisibility)
}

But I am currently using PropTypes.bool as that seems to work for this situation, but still, that would not work when for example one of the values was of type string.

@xadm, Would something like `PropTypes.oneOf( [ ...PlaceholderVisibility ] )` do that for me? (I mean, especially for objects with more key and values, it would be troublesome to do that manually) — Top-Master, May 27 '19 at 10:36
rather sth like `Array.from()`, `object.values` (or keys) ... see [here](https://stackoverflow.com/questions/38824349/how-to-convert-an-object-to-an-array-of-key-value-pairs-in-javascript) — xadm, May 27 '19 at 11:11

score 4 · Answer 1 · answered Feb 22 '21 at 10:47

To allow only one of object values in React PropTypes - you can use PropTypes.oneOf with Object.values() like so:

import PropTypes from 'prop-types';

export const PlaceholderVisibility = {
  Always: 'always',
  Never: 'never',
  OnFocus: 'on-focus',
  OnBlur: 'on-blur'
}

export const myTypes = {
  // ...
  visibility: PropTypes.oneOf(Object.values(PlaceholderVisibility))
}

Note, the statement above is equal to just this:

export const myTypes = {
  // ...
  visibility: PropTypes.oneOf([
   'always',
   'never',
   'on-focus',
   'on-blur'
  ])
}

So, it's better to have values in your object quite a unique to avoid misusages. E.g., if someone passed directly value like 'always' string - react won't complain.

React PropTypes - Allow only one of objects values?

1 Answers1