Importing a reference to PropTypes as opposed Proptypes directly

[dhmcloud]

Hey, I'm just wondering why I can't use

import PropTypes from "prop-types";

export const PT = PropTypes;

and then

Timestamp.propTypes = {
  isoTime: PT.string.isRequired,
  longFormat: PT.bool,
  verbiage: PT.string,
  side: PT.oneOf(["left", "right", "top", "bottom"]),
  titleCase: PT.bool,
};

The issue I see is when I use React Storybook, it looks like PropTypes works but PT won't work...

[ljharb]

Of course you can, because that's how JS works - but it'd be much less clear to readers of your code, which is why it's unadvisable.

[dhmcloud]

@ljharb Okay, that's what I was using, but, when I use it with storybook, the controls get all messed up... does that make sense?

[dhmcloud]

@ljharb

Example Story:

import { EXAMPLE_DATETIME_ISO } from "~/fixtures";

import { Timestamp } from "./Timestamp";

export default {
  component: Timestamp,
  title: "Components/Timestamp",
};

export const Normal = {
  args: {
    isoTime: EXAMPLE_DATETIME_ISO,
    longFormat: true,
    side: "left",
    titleCase: false,
    verbiage: "",
  },
};

Example Proptypes using PT:

Timestamp.propTypes = {
  isoTime: PT.string.isRequired,
  longFormat: PT.bool,
  side: PT.oneOf(["left", "right", "top", "bottom"]),
  titleCase: PT.bool,
  verbiage: PT.string,
};

Result:

Using PropTypes

Timestamp.propTypes = {
  isoTime: PT.string.isRequired,
  longFormat: PT.bool,
  side: PropTypes.oneOf(["left", "right", "top", "bottom"]), <- - - - 
  titleCase: PT.bool,
  verbiage: PT.string,
};

Result:

[ljharb]

I believe that's because Storybook does some light static analysis to determine if something is an official PropTypes thing or not.

Either way, I'd strongly suggest not doing this - re-exporting things only causes problems.