Easy to use and simple to install Analog Time Picker
Demo
https://react-analog-time-picker.netlify.app/
Installation
Install by executing npm i react-analog-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} from "react";
import Clock from 'react-analog-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={'white'}
fontsColor={'rgb(86, 142, 247)'}
backgroundColor={'white'}
handsColor={'rgb(86, 142, 247)'}
timeSetColor={'rgb(219, 139, 163)'}
/>
</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 | rgb(86, 142, 247) | 'white', 'black', etc |
digitsColor | Color for the clock digits | white | 'white', 'yellow', 'blue', etc |
handsColor | Color for the hands | rgb(86, 142, 247) | 'green','blue', 'pink', etc |
timeSetcolor | Color for the timeSet | rgb(219, 139, 163)' | 'green','blue', 'pink', etc |
License
MIT
author: rom.data
Would love to read your thoughts and suggestion at i.mydata132@gmail.com
Troubleshooting
If you get an error starting with "There might be a problem with the project dependency tree". It is caused by yarn. you can either install with npm: 'npx create-react-app --use-npm my-app', or uninstall yarn