React Timekeeper

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

View demo Download Source

Installation

$ npm install --save react-timekeeper

Usage

import Timekeeper from 'react-timekeeper';

render(){
	<Timekeeper
		time={this.state.time}
		// ...
	/>
}

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

API

Timepickeer component props:

time (string/object)

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

// string with meridiem
'4:55 pm'
'4:55pm'

// string without meridiem (assumes a 24 hour format)
'16:55'

// 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
config={{
	TIMEPICKER_BACKGROUND: 'red',
	FONT_FAMILY: '"Open Sans", sans-serif'
}}

Development

  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

GitHub