React Flow Usage with pure function component

Inline Proptypes

export default function MyComponent(props: {
  a:string,
  b:number
}) {
  return <span>{props.a}</span>;
}

Get Jackie Park’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Props with type object

type propTypes = {
  a?: string,
  b?: any,
  c: number,
  d: ?string
};

export default function MyComponent(props:propTypes) {
  const { a, b, c, d } = props;
  return (
    <div>
      <div>{a}</div>
      <div>{b}</div>
      <div>{c}</div>
      <div>{d}</div>
    </div>
  );
}

Share PropTypes

import propTypes from './propTypes';
export default function MyComponent(props:propTypes) {
  const { a, b, c, d } = props;
  return (
    <div>
      <div>{a}</div>
      <div>{b}</div>
      <div>{c}</div>
      <div>{d}</div>
    </div>
  );
}