temporal-react-hook - npm Package Compare versions

Comparing version 1.7.1 to 1.8.0

demo/components/DemoUseIsBetween.tsx

+import { Temporal } from '@js-temporal/polyfill';
+import React, { useState } from 'react';
+import useIsBetween from '../../src/useIsBetween';
+
+const DemoUseIsBetween: React.FC = () => {
+  const today = Temporal.Now.zonedDateTimeISO().toPlainDate();
+  const [date, setDate] = useState(today.toString());
+  const [startDate, setStartDate] = useState(today.subtract({ days: 7 }).toString());
+  const [endDate, setEndDate] = useState(today.add({ days: 7 }).toString());
+  const [inclusivity, setInclusivity] = useState<'()' | '[]' | '[)' | '(]'>('()');
+
+  const timeZone = Temporal.Now.timeZoneId();
+  const isBetween = useIsBetween({ date: `${date}T00:00:00[${timeZone}]`, startDate: `${startDate}T00:00:00[${timeZone}]`, endDate: `${endDate}T00:00:00[${timeZone}]`, inclusivity });
+
+  return (
+    <section className="demo-card">
+      <h3>useIsBetween</h3>
+
+      <div className="demo-config-panel">
+        <div className="demo-config-row">
+          <label>Date to Check:</label>
+          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="demo-input" />
+        </div>
+        <div className="demo-config-row">
+          <label>Start Date:</label>
+          <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="demo-input" />
+        </div>
+        <div className="demo-config-row">
+          <label>End Date:</label>
+          <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="demo-input" />
+        </div>
+        <div className="demo-config-row">
+          <label>Inclusivity:</label>
+          <select value={inclusivity} onChange={(e) => setInclusivity(e.target.value as any)} className="demo-select">
+            <option value="()">() - Exclusive</option>
+            <option value="[]">[] - Inclusive</option>
+            <option value="[)">[) - Inclusive Start</option>
+            <option value="(]">(] - Exclusive Start</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="demo-config-panel">
+        <div className="demo-config-row">
+          <span>Is Between?:</span>
+          <span className="demo-value">{isBetween ? 'Yes' : 'No'}</span>
+        </div>
+      </div>
+
+      <div className="demo-info-card">
+        <div className="demo-description">
+          <strong>Description:</strong>
+          <span>Checks if a date falls within a specified date range.</span>
+        </div>
+        <div className="demo-usage">
+          <span>
+            <strong>Syntax:</strong> useIsBetween({'{'}date, startDate, endDate, inclusivity{'}'})<br/>
+            <strong>Parameters:</strong><br/>
+            - An object with `date`, `startDate`, `endDate`, and optional `inclusivity` properties.<br/>
+            <strong>Returns:</strong> A boolean indicating if the date is between the range.<br/>
+            <strong>Example:</strong>
+            <code className="example-code">
+              <pre style={{ margin: 0 }}>{`const isBetween = useIsBetween({\n  date: '${date}T00:00[${timeZone}]',\n  startDate: '${startDate}T00:00[${timeZone}]',\n  endDate: '${endDate}T00:00[${timeZone}]',\n  inclusivity: '${inclusivity}'\n});\n// returns ${isBetween}`}</pre>
+            </code>
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default DemoUseIsBetween;

src/useIsBetween.ts

+import { Temporal } from '@js-temporal/polyfill';
+import { useMemo } from 'react';
+
+type DateInput = Temporal.ZonedDateTime | string;
+type Inclusivity = '()' | '[]' | '[)' | '(]';
+
+const check = (
+  date: Temporal.ZonedDateTime,
+  start: Temporal.ZonedDateTime,
+  end: Temporal.ZonedDateTime,
+  inclusivity: Inclusivity
+): boolean => {
+  const afterStart =
+    inclusivity[0] === '['
+      ? Temporal.ZonedDateTime.compare(date, start) >= 0
+      : Temporal.ZonedDateTime.compare(date, start) > 0;
+
+  const beforeEnd =
+    inclusivity[1] === ']'
+      ? Temporal.ZonedDateTime.compare(date, end) <= 0
+      : Temporal.ZonedDateTime.compare(date, end) < 0;
+
+  return afterStart && beforeEnd;
+};
+
+interface UseIsBetweenOptions {
+  date: DateInput;
+  startDate: DateInput;
+  endDate: DateInput;
+  inclusivity?: Inclusivity;
+}
+
+const useIsBetween = ({
+  date,
+  startDate,
+  endDate,
+  inclusivity = '()',
+}: UseIsBetweenOptions): boolean => {
+  const isBetween = useMemo(() => {
+    try {
+      const d = typeof date === 'string' ? Temporal.ZonedDateTime.from(date) : date;
+      let start = typeof startDate === 'string' ? Temporal.ZonedDateTime.from(startDate) : startDate;
+      let end = typeof endDate === 'string' ? Temporal.ZonedDateTime.from(endDate) : endDate;
+
+      if (Temporal.ZonedDateTime.compare(start, end) > 0) {
+        [start, end] = [end, start];
+      }
+
+      return check(d, start, end, inclusivity);
+    } catch (error) {
+      console.error('Invalid date provided to useIsBetween:', { date, startDate, endDate, error });
+      return false;
+    }
+  }, [date, startDate, endDate, inclusivity]);
+
+  return isBetween;
+};
+
+export default useIsBetween;

demo/Playground.tsx

@@ -1,2 +0,2 @@
-import { useState, FC, useRef, useEffect } from "react";
+import React, { useState, FC, useRef, useEffect } from "react";
 import DemoUseCurrentDateTime from "./components/DemoUseCurrentDateTime";
@@ -18,2 +18,3 @@ import DemoUseTimeZone from "./components/DemoUseTimeZone";
 import DemoUseIsSame from "./components/DemoUseIsSame";
+import DemoUseIsBetween from "./components/DemoUseIsBetween";
 import DemoUseCalendarTime from "./components/DemoUseCalendarTime";
@@ -37,2 +38,3 @@ import DemoUseDateTimeRange from "./components/DemoUseDateTimeRange";
   { key: "issame", label: "useIsSame", component: <DemoUseIsSame /> },
+  { key: "isbetween", label: "useIsBetween", component: <DemoUseIsBetween /> },
   { key: "format", label: "useTemporalFormat", component: <DemoUseTemporalFormat /> },
@@ -39,0 +41,0 @@ { key: "add", label: "useTemporalAdd", component: <DemoUseTemporalAdd /> },

package.json

 {
   "name": "temporal-react-hook",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "A React library that provides hooks for handling date and time operations using the Temporal API",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -30,2 +30,3 @@ # temporal-react-hook
 | `useIsSame` | Compare if two dates are the same (day, month, year, etc.) |
+| `useIsBetween` | Check if a date falls within a specified date range (e.g., `useIsBetween({ date, startDate, endDate })`) |
 | `useIsToday` | Check if a date is today |
@@ -32,0 +33,0 @@ | `useIsThisWeek` | Check if a date is in the current week |

src/index.ts

@@ -17,3 +17,4 @@ export { default as useCurrentDateTime } from './useCurrentDateTime';
 export { default as useIsSame } from './useIsSame';
+export { default as useIsBetween } from './useIsBetween';
 export { default as useDateTimeRange } from './useDateTimeRange';
 export { default as useTimeZoneOffset } from './useTimeZoneOffset';

No alert changes

Improved metrics

Total package byte prevSize

392793

1.38%

Number of package files

67

3.08%

Lines of code

9150

1.3%

Number of lines in readme file

74

1.37%

No dependency changes