react-wheel-time-picker v1.2.11

React wheel time picker

A modern wheel time picker for your React app.

• Full Typescript support
• Dark & Light mode support
• No moment.js needed
• Zero dependencies and lightweight

Live demo

To see the live demo: Click here

install

npm install react-wheel-time-picker

or

yarn add react-wheel-time-picker

d.ts declaration

If you have a vite-env.d.ts or other d.ts file in your src folder you can put this

declare module 'react-wheel-time-picker'

It's for finding corresponding type of 'react-wheel-time-picker'.

Usage

24 hours format (light & dark)

import React, { useState } from 'react';
import { TimePicker } from 'react-wheel-time-picker';

export default const  App = () => {
    const [value, setValue] = useState('12:00');
    const [isDarkMode, setIsDarkMode] = useState(false);

    const onChange = (timeValue: string) => {
    setValue(timeValue);
    };

   return (
      <div>
        <TimePicker
            label="Start time"
            isDarkMode={isDarkMode}
            onChange={onChange}
            value={value}
        />
      </div>
   );
}

12 hours format (light & dark)

import React, { useState } from 'react';
import { TimePicker } from 'react-wheel-time-picker';

export default const  MyApp = () => {
    const [value, setValue] = useState('10:00 AM');
    const [isDarkMode, setIsDarkMode] = useState(false);

    const onChange = (timeValue) => {
        setValue(timeValue);
    }

   return (
      <div>
        <TimePicker
            use12Hours
            label="Start time"
            isDarkMode={isDarkMode}
            onChange={onChange}
            value={value}
        />
      </div>
   );
}

API

Contributions Welcome!

git clone https://github.com/rodolphe37/react-wheel-time-picker

License

The ISC License.