Skip to content

Latest commit

 

History

History
143 lines (115 loc) · 8.31 KB

README.md

File metadata and controls

143 lines (115 loc) · 8.31 KB
Raw

react-native-time-slot-picker

NPM version npm npm npm runs with expo

Features

  • No dependencies.
  • A time slot picker for react native.
  • Pass the availableDates you want to show.
  • Pick a day and the timeslot you wish.
  • Simple UX.
  • Use colors of your preference by using the params.
  • Use day shortnames and month names of your preference by using the params.
  • Change the title of the timeslots section by using the params.
  • Change the width of timeslot element by using the params.

Table of contents

Screenshots

You can test the library by opening the following snack here.

Run example locally

git clone https://github.com/dgreasi/react-native-time-slot-picker.git
cd react-native-time-slot-picker
npm i # or `yarn`
npm run example ios # or `yarn example ios`

Installation

npm i @dgreasi/react-native-time-slot-picker
# OR
yarn add @dgreasi/react-native-time-slot-picker

Usage

import * as React from 'react';
import { SafeAreaView, StatusBar } from 'react-native';
import {
  IAppointment,
  IAvailableDates,
  TimeSlotPicker,
} from '@dgreasi/react-native-time-slot-picker';
import { useEffect, useState } from 'react';

const availableDates: IAvailableDates[] = [
  {
    date: '2023-08-17T21:00:00.000Z', // new Date().toISOString()
    slotTimes: ['08:00-09:00', '09:00-10:00'], // Array<string> of time slots
  },
  {
    date: '2023-08-18T21:00:00.000Z',
    slotTimes: [], // No availability
  },
  {
    date: '2023-08-19T21:00:00.000Z',
    slotTimes: ['08:00-09:00', '09:00-10:00'],
  },
];

export default function App() {
  const [dateOfAppointment, setDateOfAppointment] =
    useState<IAppointment | null>(null);

  useEffect(() => {
    // Contains the selected date, time slot in the following format
    // {"appointmentDate": "2023-08-17T21:00:00.000Z", "appointmentTime": "18:00-19:00"}
    console.log('Date of appointment updated: ', dateOfAppointment);
  }, [dateOfAppointment]);

  return (
    <SafeAreaView>
      <StatusBar backgroundColor="transparent" barStyle="dark-content" />
      <TimeSlotPicker
        availableDates={availableDates}
        setDateOfAppointment={setDateOfAppointment}
      />
    </SafeAreaView>
  );
}

You can find a detailed example here.

Props

Prop name Description Type Default
setDateOfAppointment A component to use on top of header image. It can also be used without header image to render a custom component as header. (data: IAppointment | null) => void REQUIRED
availableDates The array of the available slot times per date. IAvailableDates[] fixedAvailableDates
scheduledAppointment An already existed appointment, which is going to mark the specific date as with appointment. IAppointment undefined
marginTop Margin top for the whole component. number 0
datePickerBackgroundColor Background color of the section with the horizontal scroll, which contains the days. hex string '#FFFFFF'
timeSlotsBackgroundColor Background color of the section that contains the time slots. hex string '#FFFFFF'
timeSlotsTitle Title of section that contains the string 'Select time'
mainColor Main color of the time slot picker hex string '#04060A'
timeSlotWidth Time slot pill width number 96
dayNamesOverride Day string array to override letters for each Calendar day. First day is Sunday. string[] ['S', 'M', 'T', 'W', 'T', 'F', 'S']
monthNamesOverride Month string array to override default month names that are used as title. string[] ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

Interfaces

Name Description
IAvailableDates { date: string, slotTimes: string[] }
IAppointment { appointmentDate: string, appointmentTime: string }

Roadmap

  • Update scheduledAppointment arg to accept multiple appointments.
  • Update logic of getAppointmentDay() to show dot in dates.
  • Merge providers for performance improvement.

License

MIT