Contributing to Lumix Pt.1
Tags: beginners, ui, react, opensource
Published: 2023-11-28 04:27:04

Throughout Hacktoberfest23, I stumbled upon [Lumix](https://github.com/Keerat666/Lumix), which is a repository dedicated to providing versatile UI elements to enhance web development projects. Although some of the interesting issues were picked up during Hacktoberfest, there were some that I had an interest in working on. 

<h2>Issue - Date Picker Component</h2>
One of the [issues](https://github.com/Keerat666/Lumix/issues/26) I worked on was to design and implement a date picker component that is able to select dates. 

<h2>Working on Issue</h2>
Apart from creating the core component, the goal here was to provide a high degree of customization capabilities for the component so that the user will be able to make their own changes to the component to fit their own project.

To create the core date picker component, I decided to implement an input tag with the type of `date`. This attribute creates a date input field that the user can select a date either from a drop down calendar or by entering it in the text box.

To allow users to retrieve the date and possibly perform an action based on the value, I added in a prop that can take in a function which will receive the date value if the date has been changed from within the date picker component. 

```JavaScript
const [date, setDate] = useState("");

  const handleDateChange = (e) => {
    setDate(e.target.value);
    if (onDateChange) {
      onDateChange(e.target.value);
    }
  };

  return (
    <input
      type="date"
      value={date}
      onChange={handleDateChange}
      style={{
        borderWidth: `${borderWidth}px`,
        borderColor: `${borderColor}`,
        height: `${pickerHeight}px`,
        width: `${pickerWidth}px`,
        fontSize: `${fontSize}px`,
        padding: "0 10px",
      }}
    />
  );
```
Many of the previous contributions to Lumix worked with [PropTypes](https://www.npmjs.com/package/prop-types) in order to verify the passed prop value is of the correct datatype. It was my first time using it, but essentially PropTypes can be used to check your values during run-time and although it wasn't necessary in the component, I decided to keep it in there to also provide additional information on the component for people that will read it. To use PropTypes we need to first import it:

```JavaScript
import { PropTypes } from "prop-types"
```
PropTypes is an object with a key and value pair where the `key` is the name of the prop and the `value` is the type that is defined.

```JavaScript
DatePicker.propTypes = {
    onDateChange: PropTypes.func,
    borderWidth: PropTypes.number,
    borderColor: PropTypes.string,
    pickerHeight: PropTypes.number,
    pickerWidth: PropTypes.number,
    fontSize: PropTypes.number
};
```
Additionally, with the `defaultProps` property, you are able to set the default values of the props within the component. Although I prefer to provide the default values within the function signature, this is an alternative method with PropTypes.
```JavaScript
DatePicker.defaultProps = {
    onDateChange: () => {},
    borderWidth: 2,
    borderColor: "#000000",
    pickerHeight: 50,
    pickerWidth: 160,
    fontSize: 20
};
```
This is how the Date Picker component will look with it's default prop values.
![Date Picker component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz0ff4l5c8p3ndrlmuml.png)

Although it has not been reviewed yet, my PR can be found [here](https://github.com/Keerat666/Lumix/pull/68).