https://github.com/patrick-s-young/react-time-textfield
A controlled Material-UI TextField for keyboard time input.
https://github.com/patrick-s-young/react-time-textfield
material-ui react textfield-validation time
Last synced: 3 months ago
JSON representation
A controlled Material-UI TextField for keyboard time input.
- Host: GitHub
- URL: https://github.com/patrick-s-young/react-time-textfield
- Owner: patrick-s-young
- License: mit
- Created: 2023-02-15T03:31:34.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-30T20:31:59.000Z (over 1 year ago)
- Last Synced: 2025-02-18T07:06:40.176Z (3 months ago)
- Topics: material-ui, react, textfield-validation, time
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-time-textfield
- Size: 232 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Time-TextField
A controlled Material-UI TextField for keyboard time input.
## Quick Start
- Install by executing `npm install react-time-textfield` or `yarn add react-time-textfield`.
- Import by adding `import { ReactTimeTextField } from 'react-time-textfield'`.
- Use by adding ``. Assign callback to `onBlur` prop to receive new value.
- Hours/Minutes/Meridiem can be input using both keyboard and up/down arrows. Use Tab and right/left arrows to navigate.
## Getting started
### Installation
Add React-Time-TextField to your project by executing `npm install react-time-textfield` or `yarn add react-time-textfield`.
### Usage
Here is an example of basic usage:
```js
import React, { useState } from 'react';
import { ReactTimeTextField } from 'react-time-textfield';
function MyApp() {
const [value, setValue] = useState(new Date());
return (
);
}
```
### Custom styling
ReactTimeTextField uses Material-UI TextField. Just pass any styling-related props that the Mui TextField component uses and they will be applied:
```
```
NOTE: *onChange*, *onKeyDown*, and *onClick* props are used internally and are not available. Use *onBlur* callback to receive date object with specified time value.
## License
The MIT License.
## Author
[Patrick S. Young](https://github.com/patrick-s-young)