This is a React component for selecting a timezone. The implementation is one file, it can be styled, and it has no dependencies.
- Npm:
npm install react-timezone-picker
- Yarn:
yarn add react-timezone-picker
import React from 'react';
import TimezonePicker from 'react-timezone-picker';
const MyComponent() => {
return (
<TimezonePicker onChange={console.log} />
)
})
import React from 'react';
import TimezonePicker from 'react-timezone-picker';
const MyComponent() => {
return (
<TimezonePicker
onChange={console.log}
defaultValue={'America/New_York'}
unselectLabel="No Timezone"
style={{
borderRadius: '0.5rem',
background: 'teal',
color: 'white',
}}
/>
)
})
Customize timezone picker by passing these, or any other props valid on the <select />
element, to the component:
Prop | Description |
---|---|
onChange | initial open state of the modal |
defaultValue | the value the timezone picker is initially set to |
value | pass a value into the picker making it a controlled component |
unselectLabel | the label for selecting undefined (the undefined option does not appear without a label specified) |
style | styles for the element |
See the examples and the examples source code for more snippets to copy.
If there are any examples you'd like to see or use cases I didn't cover, please file an issue.