10 reusable component mistakes: 1
10 reusable component mistakes:
1. Incompatible props
Example: <Input required={false} requiredMessage=“Required!” />
Solution: Unify props to eliminate the risk of incompatible prop values. Or, split component into 2 separate components.
1/x…
2. Insufficient configurability.
Examples:
A Button that accepts a string means no one can put an icon in the button.
A Heading that accepts a string means no one can use markup like em/i/strong.
Solution: Accept any markup as children (aka “Slot” pattern)
3. Poor accessibility.
Examples:
Composing label with input into a single TextInput which doesn’t set the label’s for attribute. 👎
Not accepting aria tags. 👎
Solution:
Make accessibility automatic. Use semantic markup. Require the data that’s necessary for aria-tags.
4. Weak docs.
Docs should include:
✅ Interactive demos that convey realistic scenarios
✅ Props (descriptions, types, required)
✅ Usage guidelines
✅ a11y tips
✅ Related components
✅ Design system details (colors, fonts, typography, voice and tone…)
5. Poor search.
Doc search should expose:
✅ Related terms/categories/keywords
✅ Related design system content via full-text search
✅ Design system guidelines
✅ Component thumbnails
6. Only sharing UI
Solution: Share logic too! In React, that means documenting and sharing reusable Hooks.
7. Separating the design system docs from the component library docs.
Solution: Unify. Create a one stop site that includes everything developers need.
8. Generating component docs by hand.
Solution: Use tools like Storybook or react-docgen to generate docs programmatically using the code using comments. This way docs are guaranteed to be in sync with the code. 👍 Plus, well commented code is easier to read! 😀
9. Starting from scratch.
Solution: Use open source components as a foundation. There is likely something out there that does most of what you need. Wrap it, and tweak it for your needs.
10. No full time support staff.
Solution: Pay full-time staff to handle all this. It’s important to be responsive to issues.
Plus, reusable components are hard to do well. Why? Because you’re not writing code for one app, you’re writing code for everyone’s apps!
Was this useful?
I help companies build world-class React component libraries.
More at http://reactjsconsulting.com