react-date-fns - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

package.json

@@ -10,3 +10,3 @@ {
   "private": false,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
@@ -38,2 +38,3 @@ "license": "MIT",
     "autoprefixer": "^10.4.19",
+    "clsx": "^2.1.1",
     "eslint": "^8.57.0",
@@ -43,2 +44,3 @@ "eslint-plugin-react-hooks": "^4.6.2",
     "postcss": "^8.4.38",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
@@ -45,0 +47,0 @@ "typescript": "^5.2.2",

README.md

 # ReactDateFns Package
 
-A React component for displaying formatted dates using `date-fns`. This package provides a `DateDisplay` component that can be customized with various date patterns and CSS classes.
+A React component library for displaying formatted dates using `date-fns`. This package provides several components: `DateDisplay`, `DateSelect`, and `CountdownTimer`. These components can be customized with various date patterns and CSS classes.
 
@@ -15,19 +15,30 @@ ## Installation
 
-### Importing the Component
+### Importing the Components
 
-You can import the `DateDisplay` component in your React application as follows:
+You can import the components in your React application as follows:
 
 ```jsx
 import React from "react";
-import ReactDateFns, { DateDisplay } from "react-date-fns";
+import { DateDisplay, DateSelect, CountdownTimer } from "react-date-fns";
 
 const App = () => {
+  const handleDateChange = (date) => {
+    console.log("Selected date:", date);
+  };
+
   return (
     <div>
-      <ReactDateFns.DateDisplay className="date-class" pattern="yyyy-MM-dd">
-        {new Date()}
-      </ReactDateFns.DateDisplay>
       <DateDisplay className="date-class" pattern="MM/dd/yyyy">
         {new Date()}
       </DateDisplay>
+      <DateSelect
+        className="date-select-class"
+        pattern="MM/dd/yyyy"
+        onDateChange={handleDateChange}
+        showSelectedDate
+      />
+      <CountdownTimer
+        className="countdown-class"
+        targetDate={new Date(new Date().getTime() + 10000)}
+      />
     </div>
@@ -44,6 +55,23 @@ );
 
-- `date` (`Date`): The date to be formatted and displayed.
+- `children` (`Date`): The date to be formatted and displayed.
 - `className` (`string`, optional): A CSS class to apply to the `<span>` element.
-- `pattern` (`DatePattern`): The date format pattern. It can be one of the predefined patterns or any custom string pattern compatible with `date-fns`.
+- `pattern` (`string`): The date format pattern. It can be one of the predefined patterns or any custom string pattern compatible with `date-fns`.
 
+### DateSelect Props
+
+The `DateSelect` component accepts the following props:
+
+- `className` (`string`, optional): Additional CSS classes to apply to the container element.
+- `pattern` (`string`): The format pattern to use for displaying the selected date.
+- `onDateChange` (`function`, optional): Callback function to handle date changes.
+- `showSelectedDate` (`boolean`, optional): Whether to display the selected date. Defaults to `true`.
+
+### CountdownTimer Props
+
+The `CountdownTimer` component accepts the following props:
+
+- `targetDate` (`Date`): The date to count down to.
+- `className` (`string`, optional): Additional CSS classes to apply to the container element.
+- `timeLeftText` (`string`, optional): Text to display when the countdown reaches zero. Defaults to "Time’s up!".
+
 ### Available Patterns
@@ -111,6 +139,1 @@
 This project is licensed under the MIT License.
-
-```
-
-This README provides detailed information on how to install, use, and contribute to the package, as well as a list of available date format patterns. Feel free to adjust it based on your specific needs and preferences.
-```

src/components/index.ts

 export { CountdownTimer } from './CountdownTimer';
-export { DateDisplay } from './DateDisplay';
+export { DateDisplay } from './DateDisplay';
+export { DateSelect } from './DateSelect';

src/utilities/index.ts

@@ -0,3 +1,4 @@
+export { cn } from './cn';
 export { compareDates } from './compareDates';
 export { isValidDate } from './isValidDate';
 export { parseDate } from './parseDate';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71417

increased by13.23%

Number of package files

52

increased by8.33%

Lines of code

1281

increased by15.2%

Number of lines in readme file

137

increased by20.18%

Worsened metrics

Dev dependency count

18

increased by12.5%

No dependency changes