react-pick-time-range

React Pick Time Range Slot (react-pick-time-range)

Simple & customized time slots picker for React

Live Demo

Installation:

npm install react-pick-time-range

or

yarn add react-pick-time-range

Add the following bootstrap code in index.js or index.ts of your project. The UI will look ugly if not added.

import 'bootstrap/dist/css/bootstrap.css'

Usage :

Add PickTime to your component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { PickTime } from 'react-pick-time-range'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <React.StrictMode>
        <div>
            <h2>Time Range Picker Demo</h2>
            <PickTime
              onError={(error, timings) => {
                console.log('On Error', error, timings)
              }}
              onSave={(timings) => {
                console.log('Data', timings)
              }}
              onSlotsFilled={() => {
                alert('All slots are filled')
              }}
              scheduledTimings={[
                ['01:00', '01:30'],
                ['17:30', '18:00'],
              ]}
              timeFrame={30}
            />
        </div>
    </React.StrictMode>,
)