< BACK TO BLOG

NPM @bbon/react-calendar package

December 14, 2021

npm (scoped) npm Build and tag publish NPM

타입스크립트로 작성된 리액트 달력 컴포넌트입니다.

peer dependencies

설치

$ npm install --save @bbon/react-calendar

사용

import React, { useCallback } from 'react';
import { Calendar } from '@bbon/react-calendar';

import '@bbon/react-calendar/dist/calendar.css';

const MyComponent = () => {

    const handleChangeSelection = useCallback(
        (start?: string, end?: string) => {
            console.info('Selected dates: ', start, end);
        },
        [],
    );

    return (
        <div>
            <Calendar
                useMoveToYear
                useMoveToMonth
                highlightToday
                showDate
                onChange={handleChangeSelection}
            />
        </div>
    );
}

렌더링 결과
렌더링 결과

모양

@bbon/react-calendar/dist/calendar.css 파일의 내용을 확인하고, 스타일을 재정의해서 사용하실 수 있습니다.

시연

bbon.me: react-calendar 로 이동해서 동작을 확인하실 수 있습니다.

번들러

Webpack 에서 Rollup 으로 변경했습니다.

변경사유는 아래와 같습니다.

  • 트리쉐이킹 (Tree-shaking) 지원
  • CommonJS 모듈과 ES 모듈을 모두 제공

GitHub Repository


Profile picture

Pon Cheol Ku (구본철)

Software developer

Other sites

If does not find interesting topic, you might visit other site on below link.

© 2022, Built with Gatsby