react-draggable-selector v2.1.1

🖍 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

3.2. Optional Props

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.