https://github.com/ascorbic/localized-time
https://github.com/ascorbic/localized-time
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ascorbic/localized-time
- Owner: ascorbic
- Created: 2020-05-14T09:43:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T05:52:38.000Z (about 3 years ago)
- Last Synced: 2025-03-29T07:22:16.794Z (10 months ago)
- Language: TypeScript
- Size: 1.4 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# react-localized-time
This is a component to display time translated to the user's timezone.
[Try it out](https://codesandbox.io/s/react-localized-time-id0rz)
At its simplest, you can use it like this:
```jsx
import { LocalizedTime } from "react-localized-time";
//...
Gatsby Days starts at{" "}
9am PST
;
```
Or a more complicated version:
```jsx
Gatsby Days começa às{" "}
```
The `dateTime` prop accepts any text that can be parsed by [the `Date` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#Syntax). (These formats are RFC 2822 and ISO8601).
The component renders the `dateTime` value, translated into the user's timezone and locale. By default the value is appended to the existing content of the tag, separated by " / ", so the example above would render as "Gatsby Days starts at 9am PST / 18:00 BST" in the UK.
## Props
The component renders a [`
### `dateTime`: `boolean`
A date/time string in RFC 2822 or ISO8601 format. It must include a date as well as time so that it can calculate daylight saving time.
### `append`?: `boolean`
Whether the value should be appended to the existing content of the tag. Default: `true`
### `options?:`Intl.DateTimeFormatOptions`
Options that are passed to the formatter. For valid options see [DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format#Syntax).
Default:
```js
{
hour: "numeric",
minute: "numeric",
timeZoneName: "short",
}
```
### `locale`?: `string`
e.g. `"en-US"`. You may specify a locale for the display, or leave as undefined which will use the user's locale. This does not affect the timezone, just the format and the language used for timezone names.
### `separator`?: `string`
If you are using the `append` option, this is the string that will be used to separate the two times. Default: `" / "`