An example React project that explores composing UI and behavior from multiple higher order components
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.storybook
public
src
.gitignore
README.md
package.json
yarn.lock

README.md

react-calendar-components

Components for (building a month calendar with || learning) React.

An example project that explores various *React concepts and serves as an example for learning purposes.

  • *I'm aiming to keep this compatible with others such as Preact and Inferno

Poke around src/components/, src/stories/ or...

...go play with the live examples via Storybook: https://erikthedeveloper.github.io/react-calendar-components/

composingcalendarfun

React Concepts

  • Higher order components
  • Render callbacks (aka function as children)
  • Composing behavior from multiple higher order components
  • Built with create-react-app
  • Writing UI stories with Storybook
  • [TODO] ...

Other Concepts

  • Working with Javascript's Date API
  • Writing tests with Jest
  • BEM (aka you might not need SASS)
  • Flexbox (on a basic level)
  • [TODO] ...

Summary

To summarize the overall approach used and application:

  1. Enhance Calendar with desired features via applying related higher order components. These can be applied either singly (example) or by combining multiple (example)
  2. Each Calendar higher order component is intended to be composable. This is primarily enabled through treating Day as a Component as prop...
  3. ...and having each Calendar HoC "enhance" its own props.DayComponent (also via composing higher order components) see this usage
  4. The 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.

Development

📝 yarn is interchangeable with npm.

git clone git@github.com:erikthedeveloper/react-calendar-components.git
cd react-calendar-components
yarn install
yarn start

You should now be able to view the Storybook on your http://localhost:9009/.

Have fun.