aekimena-month-year-picker
Version:
Sleek, customizable month-year-picker for React Native applications
105 lines (77 loc) • 4.7 kB
Markdown
# aekimena-month-year-picker
A customizable month-year picker component for React Native. Easily integrate a month-year picker with various customization options to fit your app's design.
## Installation
You can install the package via npm or yarn:
```bash
npm install aekimena-month-year-picker
```
or
```bash
yarn add aekimena-month-year-picker
```
## Basic Usage
```tsx
import React, { useState } from "react";
import { View, StyleSheet, Button } from "react-native";
import MonthYearPicker from "aekimena-month-year-picker";
const App = () => {
const [visible, setVisible] = useState(false);
const [date, setDate] = useState(null);
return (
<View style={styles.container}>
<Button title="Show Picker" onPress={() => setVisible(true)} />
<MonthYearPicker
visible={visible}
onRequestClose={() => setVisible(false)}
onConfirm={(text) => {
setDate(text);
}}
/>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#9FBBBB",
justifyContent: "center",
alignItems: "center",
},
});
```
## Props
| **Props** | **Type** | **Description** | **Default** |
| -------------------- | --------------------------- | ----------------------------------------------------------------------- | -------------- |
| visible | boolean | Determines whether the month-year picker is visible | false |
| animationType | "none" \| "slide" \| "fade" | Specifies the animation type for the modal presentation. | "fade" |
| transparent | boolean | Indicates if the modal should be transparent. | true |
| onRequestClose | () => void | Callback function triggered when the request to close the modal occurs. | |
| onBackgroundPress | () => void | Callback function triggered when the modal background is pressed. | |
| opacity | number | Sets the opacity of the modal background. | 0.5 |
| containerStyle | ViewStyle | Custom styles for the month-year picker container. | |
| maxDate | string | Specifies the maximum date that can be selected. | "Current date" |
| minDate | string | Specifies the minimum date that can be selected. | "2000-01-01" |
| onConfirm | (text: string) => void | Callback function triggered when the confirm button is pressed. | |
| showDays | boolean | Determines if the days list should be shown | true |
| highlighterStyle | ViewStyle | Custom styles for the highlighter. | |
| itemTextStyle | TextStyle | Custom styles for the text items. | |
| itemContainerStyle | ViewStyle | Custom styles for the text item container. | |
| buttonStyle | ViewStyle | Custom styles for the button. | |
| buttonTextStyle | TextStyle | Custom styles for the button text. | |
| buttonText | string | Text displayed on the button. | "Confirm" |
| highlightedItemStyle | TextStyle | Custom styles for the highlighted items | |
## Contributing
> To get started...
### Step 1
- **Option 1**
- 🍴 Fork this repo!
- **Option 2**
- 👯 Clone this repo to your local machine using `https://github.com/aekimena/month-year-picker`
### Step 2
- **DO YOUR THING!** 🤌
### Step 3
- 🔃 Create a new pull request using <a href="https://github.com/aekimena/month-year-picker" target="_blank">`https://github.com/aekimena/month-year-picker`</a>.
## License
[](http://badges.mit-license.org)
- **[MIT license](http://opensource.org/licenses/mit-license.php)**