1.0.1 • Published 5 months ago
dipstrategy-package v1.0.1
Dips Package
Component From Dipstrategy.
Installation
To install the package, run the following command:
npm install dipstrategy-package
Or, if you are using Yarn:
yarn add dipstrategy-package
Peer Dependencies
This package requires the following peer dependencies:
react-native: ^0.76.3
react: 18.3.1
Make sure these dependencies are installed in your project.
Usage
Import the Component After installing the package, you can import the component into your React Native project:
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { DateTimePickerComponent } from 'dipstrategy-package';
Example: Using DateTimePickerComponent You can now use the DateTimePickerComponent in your application. Here's an example of how to integrate it:
const MyApp = () => {
const [startDate, setStartDate] = useState(new Date());
const handleStartDateChange = (event, selectedDate) => {
const currentDate = selectedDate || startDate;
setStartDate(currentDate);
};
return (
<View>
<Text>Select Start Date</Text>
<DateTimePickerComponent
StartDate={startDate}
onStartDateChange={handleStartDateChange}
style={styles}
/>
</View>
);
};
export default MyApp;
Custom Styling
You can pass a style prop to customize the appearance of the DateTimePickerComponent. The style prop can accept the following styles:
container: The outer container of the picker (e.g., margins, padding).
label: The label text for the date picker.
datePicker: The main date picker itself (e.g., height, width).
dateInput: The input field where the selected date is displayed (e.g., background color, border).
Example of custom styling:
<DateTimePickerComponent
StartDate={startDate}
onStartDateChange={handleStartDateChange}
style={{
container: { marginTop: 20, padding: 20 },
label: { fontSize: 18, color: 'blue' },
datePicker: { height: 60, width: 200 },
dateInput: { backgroundColor: '#e0e0e0' },
}}
/>
Props
Prop | Type | Description |
---|---|---|
StartDate | Date | The selected date value (default is new Date() ). |
onStartDateChange | function | A function that handles the date change (returns the selected date). |
style | object | Custom styles to modify the appearance of the picker. |
License
This package is licensed under the MIT License.