# react-calendar-hook

> React hook for manipulating calendar structure

Latest version **1.0.1** (published 2020-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-calendar-hook
pnpm add react-calendar-hook
yarn add react-calendar-hook
bun add react-calendar-hook
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-03-15 |
| First published | 2020-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 137.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Dejan Sandic - Deyo |
| Maintainers | dejansandic |
| Keywords | react, useCalendar, calendar, hook |

## Links

- npm: https://www.npmjs.com/package/react-calendar-hook
- Repository: https://github.com/DejanSandic/react-calendar-hook
- Homepage: https://github.com/DejanSandic/react-calendar-hook#readme
- Issues: https://github.com/DejanSandic/react-calendar-hook/issues
- npm.io page: https://npm.io/package/react-calendar-hook

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-03-15
- 1.0.0 — 2020-03-15
- 0.0.2 — 2020-03-14
- 0.0.1 — 2020-03-14

## README

# react-calendar-hook
React hook which enables you to easily create your custom calendars in a couple of minutes

# Installation
```bash
npm install react-calendar-hook
```
```bash
yarn add react-calendar-hook
```

# Usage
Live demo:
[Code Sandbox](https://codesandbox.io/s/green-leaf-vn82q)

```typescript
import React from 'react';
import {
   useCalendar, // Hook shown bellow
   dayNames, // Monday, Tuesday, etc...
   shortDayNames, // Mon, Tue, etc...
   monthNames, // January, February, etc...
   shortMonthNames, // Jan, Feb, etc...
   Calendar, // Type shown bellow
   CalendarItem // Type shown bellow
} from 'react-calendar-hook';

function App() {
   // Date is optional, current date will be set by default
   const currentDate = new Date();
   
   const calendar = useCalendar(currentDate);
}

// Return value of the userCalendar() hook
interface Calendar {
	date: Date; // Date object
	month: {
		index: number; // 0 - 11
		number: number; // 1 - 12
		name: string; // January, February, etc...
	};
	day: {
		index: number; // 0 - 6
		number: number; // 1 - 31
		name: string; // Monday, Tuesday, etc...
	};
	year: number; // 2020
	prevMonth: () => void; // Select previous month
	nextMonth: () => void; //Select next month
	selectDate: (date: Date) => void; // Select specific date
	items: CalendarItem[];
}

interface CalendarItem {
   date: number; // 1 - 31
   fullDate: Date; // Date object
   active: boolean; // Belongs to the current month
   selected: boolean; // Is current date
   name: string; // Monday, Tuesday, etc...
}
```

---
_Source: https://npm.io/package/react-calendar-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._