temporal-react-hook
v1.2.0
Published
<div> <h1>temporal-react-hook</h1> <h6>react-temporal-hooks is a React library that provides hooks for handling date and time operations using the Temporal API.</h6> </div>
Downloads
11
Readme
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.