Guidelines - ProtonMail/proton-pack GitHub Wiki

  • We will use React as the view layer.
  • We follow the idea laid out in this blog post.
  • Make Custom Hook returns Object to not be confuse with useState which return an Array.
  • Create small component, if a component becomes too big: split it, add custom hooks or move the business logic to models. Even if you think your logic cannot be reused, it makes testing easier.
  • Use PropTypes on every component receiving props.
  • useState !== setState (be careful on updating Object state).
  • If your state management becomes complex, create a custom hook (check useModal, usePagination, useCard).
  • Start every handler by handle (and then the name of the action) to avoid confusion with onAction.
  • Give a verbose name to variables.
  • Extract business logic to file, example: toDetails function.
  • For HTML tag, one attribute per line if it contains more than 3 attributes.