Skip to main content

JavaScript

This is the main component file. It should contain a default exported react function component.

Imports​

Imports will automatically sort with Prettier if using VSCode. You can disable this by removing the following setting in .vscode/settings.json:

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

JS Doc​

Components are documented with JSDoc. Add documentation comment blocks that describe your component, props, and output.

Example:

/**
 * Render the Breadcrumbs component.
 *
 * @author WebDevStudios
 * @param {object} props             The component attributes as props.
 * @param {Array}  props.breadcrumbs The breadcrumb array.
 * @return {Element}                 The Breadcrumbs component.
 */

PropTypes​

Typechecking is done using the PropTypes library. Be as specific as possible when documenting props. If the props are being passed down to another component with more detailed PropTypes, you shouldn't be specific as any type errors would be caught further down.

Example:

import PropTypes from 'prop-types'

...

MediaText.propTypes = {
  body: PropTypes.string,
  className: PropTypes.string,
  children: PropTypes.element,
  cta: PropTypes.shape({
    text: PropTypes.string,
    url: PropTypes.string,
    icon: PropTypes.string
  }),
  image: PropTypes.shape({
    url: PropTypes.string,
    alt: PropTypes.string
  }),
  mediaLeft: PropTypes.bool,
  title: PropTypes.string
}

Use defaultProps to set defaults so you don't always have to pass default props into the component.

Example:

MediaText.defaultProps = {
  mediaLeft: false
}