Time picker based on the style of the Google Keep app forked from https://github.com/catc/react-timekeeper.git

react, time, time picker, picker, hour, 24 hour, minute, react spring, 24hour, google-keep, inline-styles, minutes, time-picker
npm install @aristofanio/react-timekeeper@2.1.4


React Timekeeper

build downloads license

Time picker based on the style of the Android Google Keep app.


  • supports both 12 hour and 24 hour mode, and flexible time formats
  • simple to use with many customizable options
  • smooth, beautiful animations with react spring
  • typescript support
  • css variable support for custom styles


$ yarn add react-timekeeper

# or via npm
$ npm install --save react-timekeeper

Version 2+ of timekeeper requires react hooks (v16.8). If you're using an older version of react, install timekeeper v1 via

$ npm install --save react-timekeeper@^1.0.0


import React, {useState} from 'react';
import TimeKeeper from 'react-timekeeper';

function YourComponent(){
  const [time, setTime] = useState('12:34pm')

  return (
        onChange={(data) => setTime(data.formatted12)}
      <span>Time is {time}</span>

All styles are inlined via emotion so no css imports are required.


For full api and examples, see API docs and examples


  1. Clone the repo
  2. nvm use v12.16.0 (or anything >12+)
  3. yarn install
    • may also need to install react since it's a peer dev: yarn add -P react react-dom
  4. npm run docs:dev
  5. Navigate to localhost:3002


Before submitting a PR, ensure that:

  1. you follow all eslint rules (should be automatic)
  2. all tests pass via npm run tests
  3. everything builds
    • docs - npm run docs:build
    • lib - npm run lib
  4. provide detailed info on what bug you're fixing or feature you're adding - if possible include a screenshot/gif

Other useful commands:

  • new npm releases:
    • bump version: npm version NEW_VERSION, commit and push - CI should publish to npm automatically
  • new github releases
    • manual (TODO - add github action)