Render Prop by Any Other Name
summary
Three component patterns are implemented across React Vue and Angular using an accordion demo with a theme toggle: render props (scope slots in Vue) to control markup, prop getters to forward event handlers, state reducers to customize open/close logic (single-open and prevent-close reducers plus a combined reducer), and a simple Angular ngX data provider for context-style theming. Code examples show each pattern plugged into the same accordion without API changes, the reducers compose and the provider works, reducing duplication and preserving original internals.
AI-written summary · about
chapters (10)
- 0:00Introduction and setup
- 1:24Why framework arguments matter
- 3:13The screwdriver analogy
- 6:24Render props overview
- 10:39Scoped slots in Vue
- 11:45Prop getters explained
- 14:17State reducers in React
- 19:49Benefits of flexible components
- 20:36Data providers pattern
- 25:29Key takeaways and conclusion
related talks
25mSimply React
35mAdvanced patterns in building React Components
21mKeynote Simply React
29mA React Point of Vue
35mBuilding reusable UI libraries with React
37mBuilding Better Components — A Journey to a More Resilient Frontend
33mReact Advanced Patterns
23mDemystifying Higher order components and Render Props