Create an Add to Calendar Button in React with Colby Fayock (Pt 2)

on YouTube ↗42m

" summary

Builds an interactive Add to Calendar button that generates service links with the calendar-link package and opens them in new tabs (Google, Outlook, Yahoo, Office 365, and an .ics download). Shows concrete React code: a Tailwind-styled dropdown toggled with useState, visibility-based CSS fades for transitions, icon insertion via SVG-to-JSX conversion, and an outside-click handler that uses useRef and event.composedPath to close the menu. Also notes the Popover API as an alternative.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 1:46Calendar link generation
3. 3:10Installing calendar-link
4. 7:03Add to Calendar UI
5. 11:57Dropdown state with React
6. 13:42CSS transitions
7. 16:54Icons for UX
8. 25:24Close dropdown on click
9. 33:25Final demo
10. 34:30Q&A

" related talks

• 46mUsing Reactjs to solve our daily problemsPraveen Kumar · Git Commit Show 2021
• 32mDesigning React Interfaces: A Journey Through Modern Styling TechniquesArsalan Ahmed · React India 2024
• 35mBuilding reusable UI libraries with ReactCassidy Williams · Agent Conf 2020
• 38mWriting highly reusable React componentsJavi Velasco · React Alicante 2017
• 34mBuilding Accessible Components in ReactJemima Abu · Build Stuff 2020
• 44mModern React ApplicationsSander Tirez, Svetlana Pak · Frontend United 2019
• 26mBuilding Interactive Async UI with React 19 and AriakitAurora Walberg Scharff · Frontend Nation 2025
• 24m2025 10 03 03 AURORA SCHARFF CONGRESO REACT ALICANTE The international React js conference in SpaAurora Walberg Scharff · React Alicante 2025