Readme

A React Native time picker based on @pluto-whale-studio/repeating-wheel-picker.

Offers an inline and a modal time picker.

Installation

npm install @pluto-whale-studio/time-picker

Usage

Inline time picker

import {
  InlineTimePicker,
  type InlineTimePickerProps
} from "@pluto-whale-studio/time-picker";

// ...
const [duration, setDuration] = useState<string>();

return (
  <InlineTimePicker
    duration={duration}
    setDuration={setDuration}
  />
);

Modal time picker

import {
  ModalTimePicker,
  type ModalTimePickerProps,
  durationToString
} from "@pluto-whale-studio/time-picker";

// ...
const [duration, setDuration] = useState<Duration>({hours: 0, minutes: 0, seconds: 0});
const [showModal, setShowModal] = useState<boolean>(false);

return (
  <View>
    <Text>
      ${durationToString(duration)}
    </Text>
    <Button title={"Change time"} onPress={() => setShowModal(true)}/>

    <ModalTimePicker
      duration={duration}

      visible={showModal}
      setVisible={setShowModal}

      onConfirm={setDuration}
    />
  </View>
);

Example

Contributing

Contributions are currently not intended.

License

MIT

Changelog

Impressum / Imprint