Theming React datepicker (@datepicker-react/styled)
Recently, I decided to create a datepicker for React. The main motivation was to reduce the bundle size and speed up theming.
The problem
Having a datepicker component that you can reuse is great, but it presents a few problems. The biggest one is adapting your component to match the projects theme. You’ve probably come across this problem many times. You have a react component that you want to use in another project. It should work the same, but you want to have different color palette, which will match to the rest of website design.
Starting the solution
Let’s start by thinking about how can we theme our datepicker. Maybe we can style it using external CSS, but in my opinion that is not the best solution. Class names might change in the future, so the look of the datepicker will no longer be the same.
There are a multitude of technologies available to style your React components using CSS. We want something that allows us to easily deal with things like hover states and media queries as well as allowing us to change our styles based on the props that we pass to our datepicker.
Luckily this is exactly what styled-components is great for.
Theming with styled-components
can be cumbersome to start. You have to define breakpoint, css
props that you want to pass to you components, the colors etc. Luckily we have
styled-system, a library that enables us to apply a consistent style
with a global theme, respond to changing requirements quickly and create mobile-first responsive
layouts with ease. It is one of the best libraries I have ever used.
Design constraints theme
We define our theme as a object and then provide it using the ThemeProvider
component. This
component provides a theme to all React components underneath itself via the context API. In the
render tree all styled-components will have access to the provided theme, even when they are
multiple levels deep.
<ThemeProvidertheme={{breakpoints: ['32em', '48em', '64em'],reactDatepicker: {daySize: [36, 40],fontFamily: 'system-ui, -apple-system',colors: {accessibility: '#D80249',selectedDay: '#f7518b',selectedDayHover: '#F75D95',primaryColor: '#d8366f',},},}}><DateRangeInput {...props} /></ThemeProvider>
In the example code above we apply a theme to the ThemeProvider
. As we mentioned earlier,
@datepicker-react/styled
uses styled-system
for theming, which make it simpler to use values
from a theme and apply styles responsively across breakpoints.
That's why the theme object contains breakpoints keys. All datepicker styles are located in
datepickerReact
object. If you examine the daySize
key, we see that it is an array, which
includes two numbers. In practice, that means that the day has the size of 36 pixels if the window
is narrower than 32em. If the window is wider than 32em, the daySize
size is 40 pixels.
That's not all, you can change the color palette with ease. You just need to provide the colors
object to the reactDatepicker
object.
There are a variety of available styles. Here is a full list.