https://github.com/dirheimerb/react-repick
https://github.com/dirheimerb/react-repick
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/dirheimerb/react-repick
- Owner: dirheimerb
- Created: 2024-05-27T22:18:46.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-28T21:04:12.000Z (about 2 years ago)
- Last Synced: 2024-05-29T16:24:18.497Z (about 2 years ago)
- Language: TypeScript
- Size: 183 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Pickers Library
A collection of reusable picker components including a Color Picker, Date Picker, Time Picker, and Date Range Picker. These components are built using React, TypeScript, and Tailwind CSS.
## Components
- **[ColorPicker](#colorpicker)**: A custom color picker with predefined colors and a color wheel.
- **[DatePicker](#datepicker)**: A date picker to select a single date.
- **[TimePicker](#colorpicker)**: A time picker to select a time with AM/PM format.
- **[DateRangePicker](#daterangepicker)**: A date range picker to select a start and end date.
## Installation
To install the Pickers library, add it to your project using npm or yarn:
```bash
npm install react-repick
# or
yarn add react-repick
# or
pnpm add react-repick
```
## Usage
### ColorPicker
The `ColorPicker` component allows users to select a color from a predefined set or a color wheel.
```tsx
import React, { useState } from 'react';
import { ColorPicker } from 'react-repick';
const App: React.FC = () => {
const [color, setColor] = useState('#ff0000');
const [showColorPicker, setShowColorPicker] = useState(false);
return (
setShowColorPicker(!showColorPicker)}>
Toggle Color Picker
);
};
export default App;
```
### DatePicker
The `DatePicker` component allows users to select a single date.
```tsx
import React, { useState } from 'react';
import { DatePicker } from 'react-repick';
const App: React.FC = () => {
const [selectedDate, setSelectedDate] = useState(new Date());
const [showDatePicker, setShowDatePicker] = useState(false);
return (
setShowDatePicker(!showDatePicker)}>
Toggle Date Picker
);
};
export default App;
```
### TimePicker
The `TimePicker` component allows users to select a time with AM/PM format.
```tsx
import React, { useState } from 'react';
import { TimePicker } from 'react-repick';
const App: React.FC = () => {
const [time, setTime] = useState('12:00 PM');
const [showTimePicker, setShowTimePicker] = useState(false);
return (
setShowTimePicker(!showTimePicker)}>
Toggle Time Picker
);
};
export default App;
```
### DateRangePicker
The `DateRangePicker` component allows users to select a start and end date.
```tsx
import React, { useState } from 'react';
import { DateRangePicker } from 'react-repick';
const App: React.FC = () => {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [showDateRangePicker, setShowDateRangePicker] = useState(false);
const handleDateChange = (start: Date | null, end: Date | null) => {
setStartDate(start);
setEndDate(end);
};
return (
setShowDateRangePicker(!showDateRangePicker)}
>
Toggle Date Range Picker
);
};
export default App;
```
## API
### ColorPicker Props
API:
- `color`: The current selected color.
- `onColorChange`: Callback function to handle color change.
- `show`: Boolean to show or hide the color picker.
### DatePicker Props
API:
- `selectedDate`: The currently selected date.
- `onChange`: Callback function to handle date change.
- `show`: Boolean to show or hide the date picker.
- `setIsOpen`: Callback function to set the visibility of the date picker.
## TimePicker Props
API:
- `value`: The currently selected time.
- `onChange`: Callback function to handle time change.
## DateRangePicker Props
API:
- `startDate`: The currently selected start date.
- `endDate`: The currently selected end date.
- `onChange`: Callback function to handle date range change.
- `show`: Boolean to show or hide the date range picker.
- `onShow`: Callback function to set the visibility of the date range picker.
- `selectedStartDate`: The selected start date.
- `selectedEndDate`: The selected end date.
## License
MIT License