# simple-react-month-range-picker

> Simple React Month Range Picker

Latest version **0.2.9** (published 2023-03-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-react-month-range-picker
pnpm add simple-react-month-range-picker
yarn add simple-react-month-range-picker
bun add simple-react-month-range-picker
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.9 |
| Published | 2023-03-22 |
| First published | 2023-03-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 14 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | LEONARDO MAGLIA |
| Maintainers | leonardomaglia |
| Keywords | react, calendar, monthpicker, month picker, date picker, months |

## Links

- npm: https://www.npmjs.com/package/simple-react-month-range-picker
- Repository: https://github.com/leonardomaglia/react-month-picker
- Homepage: http://.
- Issues: https://github.com/leonardomaglia/react-month-picker/issues
- npm.io page: https://npm.io/package/simple-react-month-range-picker

## Dependencies (5)

- [moment](https://npm.io/package/moment.md) ^2.29.1
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.3
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.16
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.36
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.15.4

## 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

- 0.2.9 (latest) — 2023-03-22
- 0.2.7 — 2023-03-22
- 0.2.6 — 2023-03-22
- 0.2.5 — 2023-03-22
- 0.2.4 — 2023-03-22
- 0.2.3 — 2023-03-22
- 0.2.2 — 2023-03-22
- 0.2.1 — 2023-03-22
- 0.2.0 — 2023-03-22

## README

# Simple React Month Range Picker

Simple-React-Month-Range-Picker Component offers a popup month selection panel with the option of presets or custom month ranges.

## Installation

`npm install simple-react-month-range-picker --save`

## Snapshots

Customisable preset options list:

![Preset options](https://user-images.githubusercontent.com/795134/144825642-036e6348-cab4-447d-a7d0-7b18f6ca2350.png)

Custom range selection:

![Custom months](https://user-images.githubusercontent.com/795134/144825638-073bb937-2325-4a7f-884d-d658658a81fd.png)

## Configuration

The most basic use:

```
<MonthPicker onChange={handleChange} />
```

## Props

| prop           | type     | description                                                                                                                                   |
| -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `onChange`     | `func`   | Function invoked when start and end dates have been selected, it will be passed an array with the start and end dates: `[startDate, endDate]` |
| `presets`      | `array`  | Array of objects to use as presets: `[{title: "preset title", start: startDate, end: endDate}]`                                               |
| `closeDelay`   | `int`    | Delay in ms before pop-up window closes                                                                                                       |
| `value`        | `array`  | Starting dates: `[startDate, endDate]`                                                                                                        |
| `highlightCol` | `string` | Colour of selected months                                                                                                                     |
| `locale`       | `string` | Date locale                                                                                                                                   |
| `description`  | `string` | Description inside the card                                                                                                                   |
| `emptyDescription` | `string` | Placeholder when range is not selected                                                                                                    |
| `startDate`    | `date`   | Used to define the start date of the selector                                                                                                 |
| `endDate`      | `date`   | Used to define the end date of the selector                                                                                                 |

## Usage Example

### Online demo

https://codesandbox.io/s/simple-react-month-picker-p9uhe

### Code sample

```js
import MonthPicker from "simple-react-month-range-picker";
```

```jsx
import moment from "moment";

function App() {
  return (
    <div>
      <MonthPicker
        style={{ width: 300, margin: "50px auto" }}
        presets={[
          {
            title: "This month",
            start: moment().startOf("month").toDate(),
            end: moment().endOf("month").toDate(),
          },
          {
            title: "Past 3 months",
            start: moment().subtract(2, "month").startOf("month").toDate(),
            end: moment().endOf("month").toDate(),
          },
          {
            title: "Past 6 months",
            start: moment().subtract(5, "month").startOf("month").toDate(),
            end: moment().endOf("month").toDate(),
          },
          {
            title: "Past Year",
            start: moment().subtract(12, "month").startOf("month").toDate(),
            end: moment().endOf("month").toDate(),
          },
          {
            title: "All time",
            start: null,
            end: null,
          },
        ]}
        locale='pt-BR'
        description='Test'
        emptyDescription='No range selected'
        startDate={new Date('2010-02')}
        endDate={new Date('2020-10')}
        onChange={(range) => console.log(range)}
        closeDelay={500}
      />
    </div>
  );
}

export default App;
```

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