# @congritta-ui/timepicker

> Timepicker component for Congritta UI framework

Latest version **0.0.2** (published 2023-06-22) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @congritta-ui/timepicker
pnpm add @congritta-ui/timepicker
yarn add @congritta-ui/timepicker
bun add @congritta-ui/timepicker
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-06-22 |
| First published | 2023-06-15 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 33.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Congritta |
| Maintainers | congritta |
| Keywords | ui, styles, css, framework, frontend, congritta, component, timepicker |

## Links

- npm: https://www.npmjs.com/package/@congritta-ui/timepicker
- Repository: https://github.com/congritta/ui-timepicker
- Homepage: https://ui.congritta.com/docs/timepicker
- Issues: https://github.com/congritta/ui-timepicker/issues
- npm.io page: https://npm.io/package/@congritta-ui/timepicker

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.2.7
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.4

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2023-06-22
- 0.0.1 — 2023-06-15

## README

# @congritta-ui/timepicker

This is timepicker React component and part of [Congritta UI](https://ui.congritta.com)

## How to install

1. Install `@congritta-ui/base` if you didn't it yet. (More info at: http://ui.congritta.com/docs/base);
2. Install `@congritta-ui/timepicker`;

Add

```javascript
import TimePicker from '@congritta-ui/timepicker';
```

into your code

## How to use

Example:

```jsx
export default MyComponentWidthTimePicker() {
  const [value, setValue] = useState([12, 15]); // [hours, minutes]

  return (
    <TimePicker value={value} onUpdate={setValue} />
  )
}
```

### Props

| Prop name                               | Description                                                                | Is Required | Default value                         |
|-----------------------------------------|----------------------------------------------------------------------------|-------------|---------------------------------------|
| value                                   | Active value (`[hours, minutes]`)                                                  | true        |                                       |
| onUpdate                                | Function that executes when user clicks on a hour or a minute              | true        |                                       |
| transitionDuration                      | Duration in milliseconds to reveal or close calendar                       | false       | `210`                                 |
| gapBetweenInputWrapperAndPicker         | Gap between input wrapper and picker (in pixels)                           | false       | `10`                                  |
| minutesStep                             | Step in minutes list                                                       | false       | `1`          |
| timePickerClassName                     | Class name for TimePicker component wrapper for adding additional styles   | false       |                                       |
| inputWrapperClassName                   | Class name for input wrapper for adding additional styles                  | false       |                                       |
| pickerClassName                         | Class name for picker wrapper for adding additional styles                 | false       |                                       |
| valuesListName                          | Class name for time values list for adding additional styles               | false       |                                       |
| valuesListValueName                     | Class name for time values list item for adding additional styles          | false       |                                       |

---
_Source: https://npm.io/package/@congritta-ui/timepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._