Project Dots: time keeper

Usage no npm install needed!

<script type="module">
  import thedotsTimekeeper from '';



Installing the package at ~/projects/packages/ is recommended.

~/projects/packages> git clone

The Dots Specific

Once you clone the repo, you have to do the following to compile.

~/projects/packages> cd react-timekeeper
~/projects/packages/react-timekeeper> npm install
~/projects/packages/react-timekeeper> npm run build
~/projects/packages/react-timekeeper> npm run dev
~/projects/packages/react-timekeeper> npm run lib

Now you have to make the connection with the main project by doing this.
~/projects/packages/react-timekeeper> sudo npm link

Move to the project directory right after the above
~/projects/packages/react-timekeeper> cd ~/projects/thedots-client

Complete the link
~/projects/thedots-client> npm link react-timekeeper


import Timekeeper from 'react-timekeeper';

        // ...

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


Timepickeer component props:

time (string/object)

Time to set on component. Accepts time in 4 formats:

// string with meridiem
'4:55 pm'

// string without meridiem (assumes a 24 hour format)

// object with meridiem
    hour: 4,
    minute: 55,
    meridiem: 'pm'

// object without meridiem (assumes a 24 hour format)
    hour: 16,
    minute: 55

onChange (function)

Pass a function to be called when time is changed. Used to store time state in parent component. Function called returns object with updated time:

    formatted: '4:55 pm',	// 12 hour format
    formattedSimple: '4:55', // similar to formatted (12h), but no meridiem
    formatted24: '16:55',
    hour: 4,
    hour24: 16,
    minute: 55,
    meridiem: 'pm'

onDoneClick (function)

Displays the "Done" button and calls function when button is clicked. Useful for triggering some action on the parent component, like closing the timepicker

switchToMinuteOnHourSelect (bool)

Changes clock unit from hour to minute after selecting an hour. Exists mainly to provides a better user experience.

closeOnMinuteSelect (bool)

Whether or not to trigger "Done" button click when the user selects minutes. Similar to Google Keep functionality, where once the selects hour and minute, the picker automatically closes.

config (object)

Pass in object with any config properties to override. Currently supports overriding style properties. See full list of properties.

// example
    FONT_FAMILY: '"Open Sans", sans-serif'


  1. Clone the repo
  2. nvm use 7.10 (or anything >7.6)
  3. npm install
  4. npm run dev
  5. Navigate to localhost:3002

  • build: npm run build
  • run all tests: npm run test
  • update test snapshots: npm run test:update-snapshots
  • create lib to publish npm: npm run lib
  • run individual test: npm run test -t SPEC_NAME, eg: npm run test -t compose-time to run compose-time.js in src/helpers/__tests__/compose-time.js