npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

simple-react-month-range-picker

v0.2.9

Published

Simple React Month Range Picker

Downloads

4

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

Custom range selection:

Custom months

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

import MonthPicker from "simple-react-month-range-picker";
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;