A Step-by-Step Guide on Implementing Chakra UI Datepicker in Your React Project

In React development, the need for a robust and user-friendly date picker component is ubiquitous. Among the myriad options available, one stands out due to its lightweight nature and seamless integration with Chakra UI - the @orange_digital/chakra-datepicker.

Installation

To begin with, we need to add the Chakra UI datepicker to our project. This can be achieved using either yarn or npm. Here's how you can do it:

Copy
1
2
3
$ yarn add @orange_digital/chakra-datepicker
# or
$ npm install --save @orange_digital/chakra-datepicker

Importing and Using the Datepicker Component

With the package installed, the next step is to import the datepicker into your React component. Here's an example of how to import and use the datepicker:

Copy
1
2
3
4
5
6
7
8
import React from 'react';
import { DatePicker } from '@orange_digital/chakra-datepicker';

export const Component: React.FC = () => {
    return (
        <DatePicker initialValue={new Date()} />
    )
}

In the above code snippet, we import the DatePicker from @orange_digital/chakra-datepicker and use it in our functional component. The initialValue prop sets the initial date to the current date.

Customizing the Datepicker

Styling with Chakra UI

One of the main advantages of using the Chakra UI datepicker is the ease of customization. Chakra UI provides a default theme that can be overridden to match your application's styles. Let's dive into the details of how to customize the styles of our datepicker component.

Chakra UI uses a system of style props for CSS in JS. These props are based on common CSS properties but are camel cased. For instance, to change the background color of the datepicker, you can use the backgroundColor prop.

Copy
1
<DatePicker initialValue={new Date()} backgroundColor="blue.500" />

In the above example, we've changed the background color of the datepicker to a blue shade from Chakra UI's color palette.

Overriding Styles

Chakra UI allows you to override the default theme styles. This can be done using the extendTheme function from Chakra UI. Here's an example of how to override the styles of the datepicker component:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    DatePicker: {
      baseStyle: {
        background: "blue.500",
      },
    },
  },
});

// Then pass the theme to the ChakraProvider

In the above code, we've overridden the default background color of the datepicker component to be blue.500.

Conclusion

Implementing a datepicker in your React application can be a breeze with the right tools. The @orange_digital/chakra-datepicker package provides a lightweight and customizable datepicker component that integrates seamlessly with Chakra UI. With the knowledge from this blog post, you should understand how to add, import, and customize the datepicker in your React applications.