1.0.1 • Published 5 months ago

dipstrategy-package v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
5 months ago

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

PropTypeDescription
StartDateDateThe selected date value (default is new Date()).
onStartDateChangefunctionA function that handles the date change (returns the selected date).
styleobjectCustom styles to modify the appearance of the picker.

License

This package is licensed under the MIT License.