Sid Kshetrapal-Walking the line between Flexibility and Consistency in Component libraries
summary
Builds GitHub’s React component library example: an action list and action menu that move from a rigid config API to a composable, slot‑based design. Shows actual code patterns: switching to the compound component pattern, detecting children by child.type and filling slots, adding an action menu overlay with a searchable text input. Measures tradeoffs: escape hatches like renderItem eject accessibility and keyboard handling to apps, while composition preserves features and lets the team upstream recurring patterns into the library.
AI-written summary · about
chapters (11)
- 0:00Start
- 0:43Flexibility and Consistency
- 4:16Action List
- 5:14Dividers
- 8:55Groups
- 9:43Group Metadata
- 11:44Glue Code
- 12:50The Compound Component Pattern
- 13:07Divider
- 21:04Filtering Logic
- 21:50Keyboard Accessibility
related talks
44mWriting good components
51mBuilding Better Components — A Journey to a More Resilient Frontend
35mBuilding reusable UI libraries with React
35mAdvanced patterns in building React Components
38mWriting highly reusable React components
25mSimply React
24mCode crimes for good component APIs
21mKeynote Simply React