Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alim1496/simple-react-timepicker
A simple timepicker with typescript support to be used in React applications
https://github.com/alim1496/simple-react-timepicker
npm react rollup time-picker typescript yarn
Last synced: 16 days ago
JSON representation
A simple timepicker with typescript support to be used in React applications
- Host: GitHub
- URL: https://github.com/alim1496/simple-react-timepicker
- Owner: alim1496
- License: mit
- Created: 2023-06-18T18:11:26.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-07-03T06:22:27.000Z (over 1 year ago)
- Last Synced: 2024-11-06T04:39:34.846Z (2 months ago)
- Topics: npm, react, rollup, time-picker, typescript, yarn
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@alim1496/simple-react-timepicker
- Size: 38.1 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# simple-react-timepicker
This repository contains simple timepicker to be used in React applications. You can edit the time here
& also select time from dropdown. Currently it supports 24hr format only. I am planning to add more features
gradually. It has been developed using typescript.
## Installation
### NPM
```sh
npm install @alim1496/simple-react-timepicker
```
## Usage
### Normal use along with dropdown
```js
import React from 'react'
import TimePicker from '@alim1496/simple-react-timepicker'
const MyApp = () => {
const onChange = (val: string) => {
console.log(val)
}
return (
)
}
export default MyApp
```
## Properties
| Property | Type | Default Value | Description |
|-------------|----------|------------------------|--------------------------------------------------------------------------------------------------------------------------------|
| `time` | string | '' | The initial time to be displayed. If not passed then the current hour & minute value are displayed. |
| `showList` | boolean | true | Whether to display the dropdown time values. If `false` then it is not displayed. |
| `minHour` | number | 0 | The minimum value of hour the user is allowed to input. |
| `maxHour` | number | 23 | The maximum value of hour the user is allowed to input. |
| `onChange` | function | (time: string) => void | This function helps the user to capture the changed time as `string` in `hh:mm` format. |
| `className` | string | '' | The name of the class containing customm css rules to be applied. |
## License
MIT © [alim1496](https://github.com/alim1496)