jelly-flags

굿라이프랩에서 제공하는 React 기반의 국기 라이브러리입니다. ISO 3166-1 alpha-2 형식의 국가 코드를 사용하여 간단하게 국기를 표시할 수 있습니다.

특징

• 🚀 React 18+ 지원
• 📦 TypeScript로 작성
• 🎨 SVG 기반 고품질 국기 이미지
• ⚡️ 가벼운 번들 사이즈
• 🔧 커스터마이징 가능한 크기와 스타일

설치

# npm
npm install jelly-flags

# yarn
yarn add jelly-flags

# pnpm
pnpm add jelly-flags

기본 사용법

import { Flag } from 'jelly-flags';

function App() {
  return (
    <div>
      <Flag countryCode="KR" size={32} />
      <Flag countryCode="US" size={48} />
      <Flag countryCode="JP" />
    </div>
  );
}

UN 회원국 선택기 예제

import React, { useState } from 'react';
import { Flag, unMembers } from 'jelly-flags';

const CountrySelector: React.FC = () => {
  const [selectedCountry, setSelectedCountry] = useState<string>('KR');

  const handleCountryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedCountry(event.target.value);
  };

  const selectedCountryInfo = unMembers.find(country => country.code === selectedCountry);

  return (
    <div>
      <select value={selectedCountry} onChange={handleCountryChange}>
        {unMembers.map(country => (
          <option key={country.code} value={country.code}>
            {country.nameKo}
          </option>
        ))}
      </select>

      {selectedCountryInfo && (
        <div>
          <Flag countryCode={selectedCountryInfo.code} size={48} />
          <h3>{selectedCountryInfo.nameKo}</h3>
          <p>{selectedCountryInfo.name}</p>
        </div>
      )}
    </div>
  );
};

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | countryCode | string | Yes | - | 국가 코드 (ISO 3166-1 alpha-2) | | size | number | No | 24 | 국기 이미지의 너비 (픽셀) | | className | string | No | - | 추가 CSS 클래스 |

유틸리티 함수

import { getUNMemberCodes, isUNMember } from 'jelly-flags';

// UN 회원국 코드 목록 가져오기
const memberCodes = getUNMemberCodes();

// 특정 국가가 UN 회원국인지 확인
const isMember = isUNMember('KR'); // true

지원하는 국가 코드

ISO 3166-1 alpha-2 형식의 국가 코드를 지원합니다. 예시:

• 🇰🇷 KR (대한민국)
• 🇺🇸 US (미국)
• 🇯🇵 JP (일본)
• 🇬🇧 GB (영국)
• 등...

업데이트

# npm
npm update jelly-flags

# yarn
yarn upgrade jelly-flags

# pnpm
pnpm update jelly-flags

기여하기

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

라이선스

MIT License - 자유롭게 사용하실 수 있습니다.

작성자

GoodLifeLab

• jay ([email protected])
• elena ([email protected])