Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fatihcaliss/shadcn-time-range-picker
https://github.com/fatihcaliss/shadcn-time-range-picker
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/fatihcaliss/shadcn-time-range-picker
- Owner: fatihcaliss
- License: mit
- Created: 2024-08-12T00:44:30.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-08-18T10:23:20.000Z (3 months ago)
- Last Synced: 2024-09-28T20:07:52.695Z (about 2 months ago)
- Language: TypeScript
- Size: 30.6 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TimeRangePicker
A flexible and customizable time range picker component built with React and shadcn/ui. This component allows users to select a start and end time from a list of predefined time options, with extensive customization options.
## Features
- Select start and end times from a predefined list.
- Optional automatic sorting of start and end times.
- Customizable initial start and end times.
- Adjustable time step for generating time options.
- Optional Apply button with full customization support.
- Flexible layout options (row or column).
- Customizable labels and placeholders for start and end time selects.
- Built with shadcn/ui components for a consistent and elegant UI.
- TypeScript support for improved type safety and developer experience.
- Improved button customization with full support for shadcn/ui Button props.
## Installation
You can install the `TimeRangePicker` package via npm:
```bash
npm install shadcn-time-range-picker
```
## GitHub Repository
```
https://github.com/fatihcaliss/shadcn-time-range-picker
```
## Usage
Here's a simple example of how to use the TimeRangePicker component in your React application:
```tsx
import React from "react";
import TimeRangePicker from "shadcn-time-range-picker";
const App = () => {
const handleTimeRangeChange = (timeRange: string) => {
console.log(`Selected time range: ${timeRange}`);
};
return (
Select a Time Range
);
};
export default App;
```
## Props
The TimeRangePicker component accepts the following props:
| Prop | Type | Default | Description |
| -------------------- | --------------------------- | ------------------- | --------------------------------------------------------------- |
| initialStartTime | string | "00:00" | The initial start time. |
| initialEndTime | string | "23:30" | The initial end time. |
| onTimeRangeChange | (timeRange: string) => void | undefined | Callback function that gets called when the time range changes. |
| sort | boolean | false | If true, automatically sorts the start and end times. |
| showApplyButton | boolean | true | If true, shows the Apply button. |
| layout | 'row' \| 'column' | 'row' | Layout of the component (row or column). |
| startTimeLabel | string | "Start Time" | Label for the start time select. |
| endTimeLabel | string | "End Time" | Label for the end time select. |
| startTimePlaceholder | string | "Select start time" | Placeholder for the start time select. |
| endTimePlaceholder | string | "Select end time" | Placeholder for the end time select. |
| step | number | 30 | Time step in minutes for generating time options. |
| applyButtonText | string | "Apply" | Button text |
| buttonProps | ButtonProps | undefined | Props to customize the Apply button (shadcn/ui Button props) |
| labelClassName | string | undefined | CSS class(es) to apply to the label elements |
## Example Usage
### Basic Usage
```tsx
console.log(timeRange)}
sort={true}
/>
```
### Advanced Usage with Customizations
```tsx
console.log(timeRange)}
sort={true}
showApplyButton={true}
layout="column"
startTimeLabel="Shift Start"
endTimeLabel="Shift End"
startTimePlaceholder="Select shift start"
endTimePlaceholder="Select shift end"
step={15}
labelClassName="text-primary font-bold"
buttonProps={{
variant: "secondary",
size: "sm",
className: "font-bold text-primary",
}}
/>
```
## Button Customization
The `buttonProps` prop allows full customization of the Apply button using shadcn/ui Button component props. This includes setting the variant, size, and adding custom classes. For example:
```tsx
```
## Responsive Design
The TimeRangePicker component is designed to be responsive. When the `layout` prop is set to "row", it will automatically switch to a column layout on smaller screens for better mobile user experience.
## Contributing
Contributions are welcome! Please feel free to submit a pull request or open an issue for any bugs or feature requests.
## License
This project is licensed under the MIT License.