Package Exports
- react-analog-time-picker
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-analog-time-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Analog Time Picker
Simple and easy to use picker
A time picker for your React app.
Installation
Install by executing npm i react-analoge-time-picker or yarn add react-analog-time-picker
.
Import by adding import Clock from 'react-analog-time-picker
.
Use by adding <Clock />
. Use onChange prop for getting new values.
React Analogue Time Picker requires Node.js v10+ to run.
Example
import React, {useState, useEffect} from "react";
import Clock from 'react-analogue-time-picker'
export default function TimePicker(){
const [value, setValue] = useState(new Date())
const [selected, setSelected] = useState(null)
const onTimeChange = function(time){
setSelected(time)
}
return(
<div>
<Clock
value={value}
onTimeChange={onTimeChange}
digitsColor={'blue'}
fontsColor={'yellow'}
backgroundColor={'white'}
/>
</div>
)
}
User Guide
Prop name | Description | Default Value | Example values |
---|---|---|---|
onTimeChange | A function called when a time is selected | n/a | { currentHour: Integer, currentMinute: Integer, isAm: Boolean, currentAmOrPm: String } |
value | Initial time | n/a | new Date() |
backgroundColor | Clock background color | white | 'white', 'yellow', etc |
fontsColor | Font color for the time picker | pink | 'white', 'black', etc |
digitsColor | Color for the clock digits | pink | 'green', 'yellow', 'blue' |
License
MIT