콘텐츠로 건너뛰기

NPM @bbon/react-calendar package

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: bbonkr/react-calendar

이 사이트는 광고를 포함하고 있습니다.
광고로 발생한 수익금은 서버 유지 관리에 사용되고 있습니다.

This site contains advertisements.
Revenue generated by the ad servers are being used for maintenance.

댓글 남기기