React Pick Time Range Slot (react-pick-time-range)
Simple & customized time slots picker for React
Installation:
npm install react-pick-time-rangeor
yarn add react-pick-time-rangeAdd 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>,
)