temporal-react-hook v1.2.0

Available hooks:

useTemporal

useTimeZone

useDuration

Description for Hooks

useTemporal hook

Features:

• Real-time Updates: The hook updates the current date and time every second.
• Temporal API Integration: Utilizes the Temporal API for precise and reliable date and time handling.
• Ease of Use: Simple to integrate and use in any React component.

Example Usage:

npm install temporal-react-hook

import React from 'react';
import { useTemporal } from 'your-package-name';

const App: React.FC = () => {
  const now = useTemporal();

  return (
    <div>
      <h1>Current Date and Time</h1>
      <p>{now.toString()}</p>
    </div>
  );
};

export default App;

Benefits

• Accuracy: Temporal API provides nanosecond precision and handles time zones and calendar systems better than the traditional Date object.
• Simplicity: The hook abstracts the complexity of handling real-time updates, making it easy to display current date and time in your React application.
• Immutable: Temporal objects are immutable, ensuring that each update generates a new instance without modifying the original object.

Potential Use Cases

• Clock Display: Displaying a real-time clock in your application.
• Time-based Events: Triggering actions or displaying messages based on the current time.
• Logging and Monitoring: Showing timestamps for logs or monitoring data in real-time applications.

useTimeZone hook

Features:

• Current Time Zone: Provides the current time zone.
• Time Zone Conversion: Converts a given PlainDateTime to a specified time zone.

Example Usage

npm install temporal-react-hook

import React from 'react';
import { useTemporal, useTimeZone } from 'your-package-name';

const App: React.FC = () => {
    const now = useTemporal();
    const { timeZone, convertToTimeZone } = useTimeZone();

    const newYorkDateTime = convertToTimeZone(now, 'America/New_York');

    return (
        <div>
            <h1>Current Date and Time</h1>
            <p>{now.toString()}</p>
            <h2>Time Zone</h2>
            <p>{timeZone.toString()}</p>
            <h2>New York Time</h2>
            <p>{newYorkDateTime.toString()}</p>
        </div>
    );
};

export default App;

Benefits

• Current Time Zone Information The hook provides easy access to the current time zone of the user's environment, allowing your application to adapt to the user's locale without additional configuration.
• Time Zone Conversion: The hook includes a built-in function to convert any given date-time to a specified target time zone, which simplifies handling global time zones in applications. This is particularly useful for applications that display events or schedules across different time zones.
• Simplifies Complex Logic: By abstracting the complexity of time zone handling, this hook makes it easier for developers to implement and maintain code that involves date-time manipulations across different time zones.

useDuration hook

Features:

• Create Durations: Easily create durations from various units (e.g., hours, minutes, days).
• Add or Subtract Durations: Perform addition or subtraction of durations to/from date-times.
• Format Durations: Format durations in a human-readable string..

Example Usage

npm install temporal-react-hook

import React from 'react';
import { useTemporal, useTimeZone, useDuration } from 'react-temporal-hooks';

const App: React.FC = () => {
    const now = useTemporal();
    const { timeZone, convertToTimeZone } = useTimeZone();
    const { createDuration, addDuration, subtractDuration, formatDuration } = useDuration();

    const newYorkDateTime = convertToTimeZone(now, 'America/New_York');

    const duration = createDuration({ hours: 2, minutes: 30 });
    const addedDateTime = addDuration(now, duration);
    const subtractedDateTime = subtractDuration(now, duration);

    return (
        <div>
            <h1>Current Date and Time</h1>
            <p>{now.toString()}</p>
            <h2>Time Zone</h2>
            <p>{timeZone.toString()}</p>
            <h2>New York Time</h2>
            <p>{newYorkDateTime.toString()}</p>
            <h2>Duration</h2>
            <p>{formatDuration(duration)}</p>
            <h2>Added Duration</h2>
            <p>{addedDateTime.toString()}</p>
            <h2>Subtracted Duration</h2>
            <p>{subtractedDateTime.toString()}</p>
        </div>
    );
};

export default App;

Benefits

• Simplified Duration Management: Easily create and manage durations using the Temporal API.
• Duration Operations: Perform addition and subtraction operations with durations, enhancing date-time manipulation capabilities.
• Improved User Experience: Provides precise duration handling, which is essential for applications that involve scheduling, timers, and time calculations.