Contributing to Lumix Pt.1

Throughout Hacktoberfest23, I stumbled upon 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.

Issue - Date Picker Component

One of the issues I worked on was to design and implement a date picker component that is able to select dates.

Working on Issue

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.

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 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:

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.

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.

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.

Although it has not been reviewed yet, my PR can be found here.