{"id":19810731,"url":"https://github.com/sj-distributor/react-native-month-switch","last_synced_at":"2025-05-01T08:32:03.411Z","repository":{"id":45774227,"uuid":"514462046","full_name":"sj-distributor/react-native-month-switch","owner":"sj-distributor","description":"✨ A React Native Month Switch Component","archived":false,"fork":false,"pushed_at":"2022-08-19T05:05:50.000Z","size":620,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-26T11:39:50.165Z","etag":null,"topics":["date-switch","month","month-switch","react","react-native","react-native-month","switch","toggle","toggle-switches","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-month-switch","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sj-distributor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-16T03:03:44.000Z","updated_at":"2022-07-31T23:41:31.000Z","dependencies_parsed_at":"2022-09-26T21:30:17.635Z","dependency_job_id":null,"html_url":"https://github.com/sj-distributor/react-native-month-switch","commit_stats":null,"previous_names":["simoon-f/react-native-month-switch"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sj-distributor%2Freact-native-month-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sj-distributor%2Freact-native-month-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sj-distributor%2Freact-native-month-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sj-distributor%2Freact-native-month-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sj-distributor","download_url":"https://codeload.github.com/sj-distributor/react-native-month-switch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251847828,"owners_count":21653582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date-switch","month","month-switch","react","react-native","react-native-month","switch","toggle","toggle-switches","typescript"],"created_at":"2024-11-12T09:23:08.654Z","updated_at":"2025-05-01T08:32:03.052Z","avatar_url":"https://github.com/sj-distributor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :rainbow: react-native-month-switch\n\n[![Npm Version](https://img.shields.io/npm/v/npm.svg)](https://www.npmjs.com/package/react-native-month-switch)\n[![MIT License](https://img.shields.io/npm/l/react-native-tab-view.svg?style=flat-square)](https://www.npmjs.com/package/react-native-month-switch)\n[![Preview](https://github.com/Simoon-F/react-native-month-switch/actions/workflows/preview.yml/badge.svg)](https://github.com/Simoon-F/react-native-month-switch/actions/workflows/preview.yml)\n\nA React Native Month Switch Components\n\n## Installation\n\n```sh\nyarn add react-native-month-switch\n\nor\n\nnpm install react-native-month-switch\n```\n\n## Demo\n\n\u003ca href=\"https://raw.githubusercontent.com/Simoon-F/react-native-month-switch/master/demo/demo.gif\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Simoon-F/react-native-month-switch/master/demo/demo.gif\" width=\"360\"\u003e\u003c/a\u003e\n\n## Usage\n\n```ts\nimport React, { useRef } from 'react';\n\nimport { Button, Image, View } from 'react-native';\nimport { MonthSwitch, DateData } from 'react-native-month-switch';\nimport type { IMonthSwitchRef } from 'src/types';\n\nexport default function App() {\n  const monthSwitchRef = useRef\u003cIMonthSwitchRef\u003e(null);\n\n  return (\n    \u003cView\n      style={{\n        flex: 1,\n        justifyContent: 'space-evenly',\n      }}\n    \u003e\n      \u003cMonthSwitch /\u003e\n\n      {/* Set max date */}\n      \u003cMonthSwitch\n        format={'MM-yyyy'}\n        maxDate={'2022-08'}\n        maxDateTrigger={(b: boolean) =\u003e {\n          console.log(b, 'trigger');\n        }}\n      /\u003e\n\n      \u003cMonthSwitch\n        arrowStyle={{\n          padding: 0,\n        }}\n        format={'yyyy-MM'}\n        onChange={(dataString: DateData) =\u003e {\n          /** {\"dateString\": \"2022-05-18\", \"day\": 18, \"month\": \"05\", \"year\": 2022} */\n          console.log(dataString);\n        }}\n      /\u003e\n\n      \u003cButton\n        title=\"On ref reset ⬇️\"\n        onPress={() =\u003e {\n          monthSwitchRef.current?.reset();\n        }}\n      /\u003e\n\n      \u003cMonthSwitch\n        ref={monthSwitchRef}\n        format={'MM-yyyy'}\n        renderCustomArrow={(direction: string) =\u003e {\n          const arrowImage =\n            direction === 'left'\n              ? require('./images/left.png')\n              : require('./images/right.png');\n\n          return (\n            \u003cImage\n              style={{\n                width: 35,\n                height: 35,\n              }}\n              source={arrowImage}\n            /\u003e\n          );\n        }}\n        onLeftArrow={(date: string) =\u003e {\n          console.log('click', date);\n        }}\n        onRightArrow={(date: string) =\u003e {\n          console.log('click', date);\n        }}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n## MonthSwitch Props\n\n| Property          | Type                                              | Optional | Default       | Description                                                                                   |\n| ----------------- | ------------------------------------------------- | -------- | ------------- | --------------------------------------------------------------------------------------------- |\n| ref               | React.Ref\u003cany\u003e                                    | no       | -             | Ref                                                                                           |\n| format            | string                                            | no       | yyyy-MM       | To set the date format，can refer to：[Formatting](http://arshaw.com/xdate/#Formatting)       |\n| initValue         | string                                            | no       | current month | To set init value, default current month                                                      |\n| maxDate           | string                                            | no       | -             | Max date that can be limit                                                                    |\n| arrowStyle        | StyleProp\u003cViewStyle\u003e                              | no       | -             | Style passed to the arrow, can refer to：[Viewstyle](https://reactnative.dev/docs/view#style) |\n| maxDateTrigger    | function(b:boolean)                               | no       | -             | Triggered when maxdate condition is met                                                       |\n| onChange          | function(dataString: DateData)                    | no       | -             | Callback function, can be executed when the month is changing                                 |\n| onLeftArrow       | function(date:string)                             | no       | -             | Callback function, can be executed when the left arrow is click                               |\n| onRightArrow      | function(date:string)                             | no       | -             | Callback function, can be executed when the right arrow is click                              |\n| renderCustomArrow | function(direction: Direction) =\u003e React.ReactNode | no       | -             | Custom arrow icon render method                                                               |\n\n## MonthSwitch Ref\n\n| function | Description                        |\n| -------- | ---------------------------------- |\n| reset    | Reset to init date or today's date |\n\n## Contributing\n\nWhile developing, you can run the [example app](https://github.com/Simoon-F/react-native-month-switch/blob/master/example/README.md) to test your changes.\n\nMake sure your code passes TypeScript and ESLint. Run the following to verify:\n\n```\nyarn typescript\nyarn lint\n```\n\nTo fix formatting errors, run the following:\n\n```\nyarn lint --fix\n```\n\nRemember to add tests for your change if possible.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsj-distributor%2Freact-native-month-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsj-distributor%2Freact-native-month-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsj-distributor%2Freact-native-month-switch/lists"}