Case sudy: Lucentum, creating our own React component library
summary
Team of two builds Lucentum: a private React component library for a European institution, using React, CSS Modules + SASS, Storybook, enzyme with snapshot tests and insisting on 100% coverage. Icons (about 40–50) are custom and a helper called react-css-props maps props to CSS classes (only used by this project). Complex cases force in-house work around react-select and a three‑week map rewrite replaced by react-simple-maps. Library is deployed, maintained, and theming moves to styled‑components with Flow types.
AI-written summary · about
chapters (14)
- 0:00Start
- 1:50Have you ever developed your own React component library *completely* from scratch?
- 5:16Initial Stack
- 5:42CSS MODULES
- 6:32The Block Component
- 11:46downloads 3M/month
- 14:16Introducing react-css-props
- 21:22The DatePicker 17
- 23:44The Language Components
- 26:13YAHOO!
- 26:32The Select / Autocomplete / Typeahead / Magic
- 32:49Abstractions are good, but not always!
- 34:23The (stupid) Map
- 45:25Hacktoberfest Support open source and earn a limited edition T-shirt
related talks
24mCase Study: Creating a Component Library in React JS
43mBuilding a component based library with React
33mKickstarting a library of internal React components for multiple teams
32mKickstarting libraries of shared React components for multiple teams
46mBuilding Reusable Components ... That Are Actually Reusable
45mDesign systems adventures with React and TypeScript
07mBuilding Component Libraries for Cross Team Use with React
44mThe UI Component Library You Always Dreamed Of