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 [email protected]

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