An experiment exploring composing UI and behavior in React using higher order components for a customizable calendar UI
A project exploring composing UI and behavior in React for a customizable calendar component using higher order components.
Live demo: https://erikthedeveloper.github.io/react-calendar-components/
To summarize the overall approach used:
Calendar
with desired features via applying related higher order components. These can be applied either singly (example) or by combining multiple (example)
Calendar
higher order component is intended to be composable. This is primarily enabled through treating Day
as a Component as prop...Calendar
HoC "enhance" its own props.DayComponent
(also via composing higher order components) see this usage
EnhanceDay
render callback component ensures that each Calendar's props.DayComponent
is only enhanced as-needed. More generally this enables deriving/computing properties from props
while avoiding the computed values becoming stale.If you're curious to learn more, poke around src/components/, src/stories/ and play with the live examples via Storybook: https://erikthedeveloper.github.io/react-calendar-components/
The calendar UI is built with accessibility in mind. This includes things like accounting for keyboard navigation and providing appropriate aria labels.
Example: Navigating months and selecting a date range using only the keyboard.
For a quality dive into accessibility specific to calendars see this great write up: https://www.24a11y.com/2018/a-new-day-making-a-better-calendar/
📝 yarn
is interchangeable with npm
.
git clone [email protected]:erikthedeveloper/react-calendar-components.git
cd react-calendar-components
yarn install
yarn start
You should now be able to view the Storybook on your localhost.
Have fun!