[React] react-timezone-select

react-timezone-select

タイムゾーンライブラリ、リストの選択が容易

サイトのセットアップタイムゾーンで設定値を変更する場合に便利です

.

方法:npm i反応−時間領域−選択

import React, { useState } from 'react';
import styled from 'styled-components';
import TimezoneSelect from 'react-timezone-select';
function Timezone() {
  const [timezone, setTimezone] = useState(
    Intl.DateTimeFormat().resolvedOptions().timeZone
  );
  
    return (
    <Section>
      <Subtitle>Timezone</Subtitle>
      <TimezoneSelect
        value={timezone}
        onChange={setTimezone}
        styles={customStyles}
      />
    </Section>
  );
}

//styled-components부분의 코드는 생략

コードはとても簡単です.
npmサイト(クリック)
また、基本的には、スタイルの方法は広く使われているreact-selectと同じです.react-selectライブラリの使用方法も後で説明します.