10 Component Commandments

react-component-commandments.md

10 React Component Commandments

1. Document the Usage If you don't document how your component is supposed to be used, it's by definition useless.

2. Allow for contextual semantics Allow your components to accept an as prop, which will consistently let you override what DOM element is being rendered.

function Grid({ as: Element, ...props }) {
  return <Element className="grid" {...props} />
}
Grid.defaultProps = {
  as: 'div',
};

function App() {
  return (
    <Grid as="main">
      <MoreContent />
    </Grid>
  );
}

3. Avoid boolean props Boolean properties often doesn't scale with changing requirements. Instead, try to use enumerated values like strings for values that might have a chance to become anything other than a binary choice. Just save the boolean props for the truly binary choices.

<Button variant="primary" size="large">
  I am primarily a large button
</Button>

4. Use props.children Much easier to use than having a content prop or something else that typically only accepts a simple value like text. props.children resembles how regular HTML works. Second, you're free to pass in whatever you want!

5. Let the parent hook into internal logic

6. Spread the remaining props

7. Give sufficient defaults

8. Don't rename HTML attributes

9. Write prop types (or types)

10. Design for the developers

summarized from this article