🖍 React-Draggable-Selector

Select with a simple drag!

React-Draggable-Selector is a react component that allows users to easily select time ranges by dragging.

This package is for react applications, and uses @emotion for styling and dayjs for date and time management. Its main advantages are its intuitive drag-to-select functionality. You can select a time zone by day of the week or by date. Let's get started!

Live example & Document

Go Live Example

You can learn how to use it directly in the document.

🚀 Quick Start

1. Installation

Use npm package manager to install

$ npm install react-draggable-selector

or install with yarn

$ yarn add react-draggable-selector

2. Usage

Take out the component in your React project.

1. When using Javascript:

import { useState } from 'react';
import { DraggableSelector } from "react-draggable-selector";

function App () {
  const [dates, setDates] = useState([]);  // Should inject sorted, not duplicated Date[]
  const [times, setTimes] = useState([]);

  return (
    <DraggableSelector
      minTime={9}              // required
      maxTime={14}             // required
      dates={dates}            // required, required default: []
      timeSlots={times}        // required, required default: []
      setTimeslots={setTimes}  // required
    />
  );
};

export default App;

2. When using Typescript:

import { useState } from 'react';
import { DraggableSelector, TimeSlot } from "react-draggable-selector";

/*
interface TimeSlot {
  day: number;
  date: string;
  minTime: string;  // '09:00', '14:00'
  maxTime: string;  // '09:30', '14:30'
}
*/

function App () {
  const [dates, setDates] = useState<Date[]>([]);  // Should inject sorted, not duplicated Date[]
  const [times, setTimes] = useState<TimeSlot[]>([]);

  return (
    <DraggableSelector
      minTime={9}              // required, type: 'number'
      maxTime={14}             // required, type: 'number'
      dates={dates}            // required, type: 'Date[]', required default: []
      timeSlots={times}        // required, type: 'TimeSlot[]', required default: []
      setTimeslots={setTimes}  // required, type: 'React.Dispatch<React.SetStateAction<TimeSlot[]>>'
    />
  );
};

export default App;

3. Props

3.1. Required Props

Name (Prop)	Type	Description	Default value	Required
dates	Date[]	Selected dates, you can making a selection for that date. Required default value is []	-	✔️
minTime	number	The start time to display. Type it in 24-hour notation and write it as follows, 9	-	✔️
maxTime	number	The last time to display. Type it in 24-hour notation and write it as follows, 18	-	✔️
timeSlots	TimeSlot[]	Array of selected time cells. You can also convert the information from output into a Date object and use it.	-	✔️
setTimeSlots	React.Dispatch<React.SetStateAction<TimeSlot[]>>	The setState function of the selectedTimeSlots.	-	✔️

3.2. Optional Props

Name (Prop)	Type	Description	Default value	Required
timeUnit	5 | 10 | 15 | 20 | 30 | 60	The time interval for the selector. The amount of time a cell has.	30
dateFormat	string	Use the date format method of dayjs. You can use the following link to set the formatting form. (https://day.js.org/docs/en/display/format)	'M.D'
timeFormat	string	Use the time format method of dayjs. You can use the following link to set the formatting form. (https://day.js.org/docs/en/display/format)	'HH:mm A'
mode	'date' | 'day'	Decide whether to indicate all dates or by day of the week. (In the day version) If there is no day of the week corresponding to the selected date, the cell is blocked so that it cannot be selected.	'day'
slotWidth	number	The width of each slot. Assign the value in number.	62
slotHeight	number	The height of each slot. Assign the value in number.	18
slotsMarginTop	number	The margin-top of slots container. Assign the value in number.	11
slotsMarginLeft	number	The margin-left of slots container. Assign the value in number.	20
maxWidth	string	The max-width of selector. Assign the value in string. e.g. 536px	'546px'
maxHeight	string	The max-height of selector. Assign the value in string. e.g. 452px, 100%	'452px'
defaultSlotColor	string	The default color of each slot. Assign the value in string. e.g. #FFFFFF	'#FFFFFF'
selectedSlotColor	string	The color of each slot when it is selected. Assign the value in string. e.g. #FFF5E5	'#b3c6d3'
disabledSlotColor	string	The color of each slot when it is disabled. Assign the value in string. e.g. #e1e1e1	'#e1e1e1'
hoveredSlotColor	string	The color of each slot when it is hovered. Assign the value in string. e.g. #FFF5E5	'#eef2f6'
slotsContainerBorder	string	The border of slots container. Assign the value in string. e.g. 1px solid #8c8d94	'1px solid #8c8d94'
slotsContainerBorderRadius	string	The border-radius of slots container. Assign the value in string. e.g. 0px, 5px	'0px'

License

The MIT License.

Contribution & Issues & Bug report

Always welcome! I would appreciate it if you could leave it as an issue in the repository.