React Calendario

While there are plenty of great solutions for creating a date picker or calendar in React already, most have very limited options for choosing how and what to render. I wanted a React component with a simple API for creating internationalized calendars and date pickers, while allowing complete freedom to structure and style what was rendered by the component. So, I created and published my first npm package, react-calendario. Below is a very basic example.

Customization

react-calendario takes advantage of the powerful Render Prop pattern allowing the consumer to customize and style the calendar or date picker however they like. Unlike passing configuration props to traditional components or the Higher Order Component pattern the Render Prop pattern allows the consumer of the component to customize and style the JSX returned by a component however they like.

react-calendario expects a function that returns JSX either as a prop named render or as its only child. react-calendario calls the provided function in its own render method passing to it all the necessary logic to create the calendar or date picker component as arguments.

You can read more about the arguments passed to the function here.

Internationalization

I am particularly excited about react-calendario’s support for Internationalization. Using the Intl.DateTimeFormat API react-calendario can support all the languages supported by a user’s browser. To configure the language react-calendario will use just pass a supported browser language code as the language prop. If the language code is invalid or absent, react-calendario will fallback to the browser’s language.

Inspiration

The inspiration for using the Render Prop pattern as well as the layout of react-calendario’s README were inspired by the awesome work done by Kent C. Dodds and others on downshift. Keep up the great work!