https://github.com/sj-distributor/react-native-month-switch
✨ A React Native Month Switch Component
https://github.com/sj-distributor/react-native-month-switch
date-switch month month-switch react react-native react-native-month switch toggle toggle-switches typescript
Last synced: about 1 month ago
JSON representation
✨ A React Native Month Switch Component
- Host: GitHub
- URL: https://github.com/sj-distributor/react-native-month-switch
- Owner: sj-distributor
- License: mit
- Created: 2022-07-16T03:03:44.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-19T05:05:50.000Z (almost 3 years ago)
- Last Synced: 2025-04-26T11:39:50.165Z (about 1 month ago)
- Topics: date-switch, month, month-switch, react, react-native, react-native-month, switch, toggle, toggle-switches, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-month-switch
- Size: 605 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# :rainbow: react-native-month-switch
[](https://www.npmjs.com/package/react-native-month-switch)
[](https://www.npmjs.com/package/react-native-month-switch)
[](https://github.com/Simoon-F/react-native-month-switch/actions/workflows/preview.yml)
A React Native Month Switch Components
## Installation
```sh
yarn add react-native-month-switch
or
npm install react-native-month-switch
```
## Demo
## Usage
```ts
import React, { useRef } from 'react';
import { Button, Image, View } from 'react-native';
import { MonthSwitch, DateData } from 'react-native-month-switch';
import type { IMonthSwitchRef } from 'src/types';
export default function App() {
const monthSwitchRef = useRef(null);
return (
{/* Set max date */}
{
console.log(b, 'trigger');
}}
/>
{
/** {"dateString": "2022-05-18", "day": 18, "month": "05", "year": 2022} */
console.log(dataString);
}}
/>
{
monthSwitchRef.current?.reset();
}}
/>
{
const arrowImage =
direction === 'left'
? require('./images/left.png')
: require('./images/right.png');
return (
);
}}
onLeftArrow={(date: string) => {
console.log('click', date);
}}
onRightArrow={(date: string) => {
console.log('click', date);
}}
/>
);
}
```
## MonthSwitch Props
| Property | Type | Optional | Default | Description |
| ----------------- | ------------------------------------------------- | -------- | ------------- | --------------------------------------------------------------------------------------------- |
| ref | React.Ref | no | - | Ref |
| format | string | no | yyyy-MM | To set the date format，can refer to：[Formatting](http://arshaw.com/xdate/#Formatting) |
| initValue | string | no | current month | To set init value, default current month |
| maxDate | string | no | - | Max date that can be limit |
| arrowStyle | StyleProp | no | - | Style passed to the arrow, can refer to：[Viewstyle](https://reactnative.dev/docs/view#style) |
| maxDateTrigger | function(b:boolean) | no | - | Triggered when maxdate condition is met |
| onChange | function(dataString: DateData) | no | - | Callback function, can be executed when the month is changing |
| onLeftArrow | function(date:string) | no | - | Callback function, can be executed when the left arrow is click |
| onRightArrow | function(date:string) | no | - | Callback function, can be executed when the right arrow is click |
| renderCustomArrow | function(direction: Direction) => React.ReactNode | no | - | Custom arrow icon render method |
## MonthSwitch Ref
| function | Description |
| -------- | ---------------------------------- |
| reset | Reset to init date or today's date |
## Contributing
While 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.
Make sure your code passes TypeScript and ESLint. Run the following to verify:
```
yarn typescript
yarn lint
```
To fix formatting errors, run the following:
```
yarn lint --fix
```
Remember to add tests for your change if possible.
## License
MIT