Skip to content

Commit

Permalink
fix: minor repo / docs / example cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
ndom91 committed Mar 29, 2023
1 parent 9830bd6 commit 23da2cb
Show file tree
Hide file tree
Showing 5 changed files with 1,210 additions and 39 deletions.
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
node_modules/
dist/
example/.snowpack
example/build/
example/node_modules
59 changes: 27 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ While looking around for a good option, I had trouble finding a timezone select

#### Demo: [ndom91.github.io/react-timezone-select](https://ndom91.github.io/react-timezone-select/)

> This demo is also available in the `./examples` directory. Simply run `npm run dev` in the root of the repository after installing everything in the examples subdirectory and snowpack dev will begin, where you can find the demo at [`localhost:8080`](http://localhost:8080).
> This demo is also available in the `./examples` directory. Simply run `pnpm dev` in the root of the repository and the vite dev server will start, where you can then find the example app at [`localhost:3001`](http://localhost:3001).
We also have some **more examples** available on Codesandbox using this component with the datetime library `spacetime` ([example](https://codesandbox.io/s/react-timezone-select-usage-z37hf)) as well as with `moment` ([example](https://codesandbox.io/s/react-timezone-select-usage-moment-5n6vn)), as well as in Typescript using the new `Intl` browser API ([example](https://codesandbox.io/s/react-timezone-select-typescript-8lsv3?file=/src/App.tsx)) showing how one might use this component in a real application.

Expand All @@ -34,7 +34,9 @@ import ReactDOM from 'react-dom'
import TimezoneSelect from 'react-timezone-select'

const App = () => {
const [selectedTimezone, setSelectedTimezone] = useState({})
const [selectedTimezone, setSelectedTimezone] =useState(
Intl.DateTimeFormat().resolvedOptions().timeZone
)

return (
<div className="App">
Expand Down Expand Up @@ -86,22 +88,7 @@ const [timezone, setTimezone] = useState(
)
```

Thanks [@ndrwksr](https://github.com/ndom91/react-timezone-select/issues/25)!

### ⚠ Next.js Users

**Update**: Starting with `v1.3.0` you DO NOT need `next-transpile-modules` to use this library with Next.js anymore!

For now, Next.js isn't great about handling ESM packages. Until this gets fixed, there is a workaround for using this and other ESM packages via [`next-transpile-modules`](https://www.npmjs.com/package/next-transpile-modules).

```js
// next.config.js
const withTM = require('next-transpile-modules')(['react-timezone-select'])

module.exports = withTM({
// ...further Next.js config
})
```
Thanks [@ndrwksr](https://github.com/ndom91/react-timezone-select/issues/25)

### 🕒 Custom Timezones

Expand All @@ -111,7 +98,7 @@ The `timezones` prop takes a dictionary of timezones. Don't worry, we'll prepend

```jsx
import TimezoneSelect, { allTimezones } from 'react-timezone-select'
;<TimezoneSelect
<TimezoneSelect
value={selectedTimezone}
onChange={setSelectedTimezone}
timezones={{
Expand All @@ -126,26 +113,34 @@ The above example will generate two additional choices in the select options, on

## 🕹️ Props

- `value` - Initial Timezone `string`, i.e. `'Europe/Amsterdam'` or the full object from the onChange function: `{ value: string, label: string, abbrev: string, altName: string }`
- `value` - `string | Object` - Initial/current Timezone.
```
'America/Juneau' | {
value: 'America/Juneau'
label: '(GMT-8:00) Alaska,
abbrev: 'AHST',
offset: -8,
altName: 'Alaskan Standard Time'
}
```
- `onBlur` - `() => void`
- `onChange` - `(timezone) => void`
- Example `timezone` parameter:
```
{
value: 'America/Juneau'
label: '(GMT-8:00) Alaska,
abbrev: 'AHST',
offset: -8,
altName: 'Alaskan Standard Time'
}
```
- `labelStyle` - `'original' | 'altName' | 'abbrev'`
- `timezones` - Custom Timezone Object
- `timezones` - `Record<string,string>`
```
timezones={{
...allTimezones,
'America/Lima': 'Pittsburgh',
'Europe/Berlin': 'Frankfurt',
}}
```

- `maxAbbrLength` - `number` - Truncate `abbrev` labelStyles string to length
- Any other [`react-select`](https://github.com/jedwatson/react-select#props) props

## 🚧 Contributing

Pull requests are always welcome! Please stick to the `prettier` settings, and if adding new features, please consider adding test(s) and documentation where appropriate!
Pull requests are always welcome! Please stick to repo settings (prettier, eslint, etc.), and if adding new features, please consider adding test(s) and documentation where appropriate!

## 🙏 Thanks

Expand Down
4 changes: 0 additions & 4 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,8 @@
"spacetime-informal": "^0.6.1"
},
"devDependencies": {
"@snowpack/plugin-react-refresh": "^2.5.0",
"@snowpack/plugin-typescript": "^1.2.1",
"@snowpack/plugin-webpack": "^2.3.1",
"@types/react": "^17.0.4",
"@types/react-dom": "^17.0.3",
"@types/snowpack-env": "^2.3.3",
"@vitejs/plugin-react": "^1.1.4",
"prettier": "^2.2.1",
"typescript": "^4.2.4",
Expand Down
Loading

0 comments on commit 23da2cb

Please # to comment.