[React] react-timezone-select

react-timezone-select

• 타임존을 리스트형태로 쉽게 선택할 수 있도록 만들어진 라이브러리
• 사이트에서 타임존을 설정하여 설정값을 바꿀 때 사용하면 용이하다
• 인스톨 방법: npm i react-timezone-select

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부분의 코드는 생략

코드는 굉장히 simple하다.
npm사이트(클릭)
그리고, 기본적으로 style을 입히는 방법은 널리 사용되고 있는 react-select와 동일하다. 추후에 react-select라이브러리를 사용하는 방법도 다뤄볼 생각이다.