# untitled-timepicker
> A simple and reusable time picking component for React apps.
Latest version **1.0.2** (published 2022-06-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install untitled-timepicker
pnpm add untitled-timepicker
yarn add untitled-timepicker
bun add untitled-timepicker
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-06-29 |
| First published | 2022-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 36.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Dylan Hepworth |
| Maintainers | dylanhepworth |
| Keywords | untitled-timepicker, react, timepicker, time-picker, untitled, time, picker, react-time-picker |
## Links
- npm: https://www.npmjs.com/package/untitled-timepicker
- Repository: https://github.com/dylan-hepworth/untitled-timepicker
- Homepage: https://github.com/dylan-hepworth/untitled-timepicker#readme
- Issues: https://github.com/dylan-hepworth/untitled-timepicker/issues
- npm.io page: https://npm.io/package/untitled-timepicker
## Dependencies (1)
- [postcss](https://npm.io/package/postcss.md) ^8.4.14
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.2 (latest) — 2022-06-29
- 1.0.1 — 2022-06-29
- 1.0.0 — 2022-06-29
## README
# Untitled TimePicker
A simple reusable time picking component for React apps.
## Installation
Install using npm:
```sh
npm install --save untitled-timepicker
```
Install using yarn:
```sh
yarn add untitled-timepicker
```
## Usage
Here is a basic example of displaying the Untitled TimePicker in a React app.
```js
// import the library
import TimePicker from "untitled-timepicker";
// import styles
import "/untitled-timepicker/dist/index.css";
// Callback function which will returned the selected time from the component
const displayTime = (time) => {
console.log(time);
};
function App() {
return ;
}
export default App;
```
## Prop Options/Configuration
| Prop Name | Type | Default Value | Description |
| ------------------------------------- | --------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| [`timeSelected`](#timeselected) | _func_ | () => {} | The timeSelected function is called when the user selects a time. This will pass back the string of the selected time. |
| [`defaultTime`](#defaulttime) | _string_ | | The defaultTime string is the time that is selected by default.
**12 Hour example:** "09:49 AM"
**24 Hour example:** "09:49" |
| [`label`](#label) | _string_ | | The label string is the label that is displayed above the time picker. |
| [`showDropdown`](#showdropdown) | _boolean_ | false | The showDropdown boolean is true if the dropdown is shown when clicking on the input. |
| [`allowInlineEdit`](#allowinlineedit) | _boolean_ | true | The allowInlineEdit boolean is true if the user can edit the time within the input. |
| [`use24HourForamt`](#use24hourformat) | _boolean_ | false | The use24HourFormat boolean is true if the time is displayed in 24 hour format. |
| [`compactMode`](#compactmode) | _boolean_ | false | The compactMode boolean is true if the time picker is in compact mode. This will display a smaller time picker. |
| [`incrementBy`](#incrementby) | _number_ | 0 | The incrementBy number is the number of minutes that the time picker increments by.
**Available options:** 5, 10, 15, 30, 60. |
| [`hoursAvailable`](#hoursavailable) | _array_ | | An array of hours (numbers) that are to be used as the available hours. |
### timeSelected
More soon...
### defaultTime
More soon...
### label
### showDropdown
More soon...
### allowInlineEdit
### use24HourFormat
### compactMode
Compact mode in standard 12 hour format
Compact mode in 24 hour mode (`use24HourFormat` set to `true`)
### incrementBy
This prop is used to specify the incremental amount of minutes that are available to select. For example, if the value `15` was passed, then the available minutes to choose from would be `00, 15, 30, 45`. Likewise if the value `10` was supplied, the options `00, 10, 20, 30, 40, 50` would be available for selection.
Here the value `15` was passed
### hoursAvailable
In some cases, users may wish to limit the number of hours availble to choose from. This array should include numbers between 1 and 23. Duplicates will automaticall be removed. The hours will also automatically be sorted.
If `hoursAvailable` is provided an array `[1, 2, 3, 4, 5]`, then the time picker will display the hours "01", "02", "03", "04", and "05".
If `hoursAvailble` is provided an array, the hour with the smallest value will automatically be selected. In the previous example, "01" would be selected. However, the value of `defaultTime` will override the hour value in this case.
The array `[4, 5, 6]` was passed to `hoursAvailable`
**Enjoy!**
---
_Source: https://npm.io/package/untitled-timepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._