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

react-native-month-selector

v1.4.0

Published

Swipable month selector in react native

Downloads

923

Readme

react-native-month-selector

This package lets you select months. It also allows you to use swipe gestures to navigate between pages.

Install

npm install react-native-month-selector --save
yarn add react-native-month-selector

Props

| Params | Type | Default | Description | | -------------------------- | :----------------------------------------: | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | selectedDate | moment.Moment (a valid moment.js instance) | moment() | currently highlighted / selected month | | currentDate | moment.Moment | moment() | today's date | | maxDate | moment.Moment | moment() | the maximum date than can be shown | | minimumDate | moment.Moment | moment("01-01-2000", "DD-MM-YYYY") | the mimimum date than can be shown | | selectedBackgroundColor | string | "#000" | the color of the highlight for the seleced month | | selectedMonthTextStyle | TextStyle | { color: "#fff" } | text style for the selected month | | seperatorHeight | number | 1 | height of the separators | | seperatorColor | string | "#b6c3cb" | color of the separators | | nextIcon | JSX.Element | null | custom react component for the next button | | prevIcon | JSX.Element | null | custom react component for the prev button | | nextText | string | "Next" | custom text for the next button | | prevText | string | "Prev" | custom text for the prev button | | containerStyle | ViewStyle | null | custom style for the container | | yearTextStyle | TextStyle | null | custom style for the year text | | monthTextStyle | TextStyle | null | custom style of the text for the months | | currentMonthTextStyle | TextStyle | null | custom style for the current month text | | initialView | moment.Moment | moment() | which month should be selected initially | | onMonthTapped | (month: moment.Moment) => any | (month) => {} | function called when month is pressed | | onYearChanged | (year: moment.Moment) => any | (year) => {} | function called when the year is changed (when we navigate pages) | | monthDisabledStyle | TextStyle | { color: "#00000050" } | text style for disabled months | | localeLanguage | string | "en" | specify the localization language for moment.js | | localeSettings | moment.LocaleSpecification | {} | to update the moment.js localization settings | | swipable | boolean | false | enables swiping between pages | | velocityThreshold | number | 0.3 | Velocity that has to be breached in order for swipe to be triggered (vx and vy properties of gestureState) | | directionalOffsetThreshold | number | 80 | Absolute offset that shouldn't be breached for swipe to be triggered (dy for horizontal swipe, dx for vertical swipe) | | gestureIsClickThreshold | number | 5 | Absolute distance that should be breached for the gesture to not be considered a click (dx or dy properties of gestureState) |

Sample Usage

  <View style={styles.container}>
      <Text style={styles.welcome}>
        Selected Month is { this.state.month && this.state.month.format('MMM YYYY')}
      </Text>
      <MonthSelectorCalendar
          selectedDate={this.state.month}
          monthTapped={(date) => this.setState({ month: date })}
      />
    </View>

Month Calendar

I'm open to keep this updated. Please open PRs!

Contributors

  • vinodkumar8
  • is343
  • isaaclem