ReactJS: How can I have a more modular use of prop types & shapes for objects?

Question

I like to explicitly specify all my prop types for every class.

React.createClass({
  propTypes: {
    optionalArray: React.PropTypes.array,
    optionalBool         


        

Answer 1

I had the same problem and just moved the values to a separate ES6 module. In your example:

// File lib/PropTypeValues.js
import { PropTypes } from 'react';

export let MemoryPropTypes = PropTypes.shape({
  memoryID: PropTypes.number,
  content: PropTypes.string,
  date: PropTypes.object,
  dateStr: PropTypes.string,
  note: PropTypes.string
}).isRequired

Then in your client code:

// MemoryForm.jsx
import { MemoryPropTypes } from './lib/PropTypeValues'
import React from 'react';

class MemoryForm extends React.Component {
  static propTypes: {
    memory: MemoryPropTypes,
    // ...
  };
}

Hope this helps.