Dynamic Updates

Update timepicker options dynamically without destroying the instance

💡

Update Method

Use the update() method to change options on an existing timepicker instance without recreating it.

Interactive Demo

Change options dynamically and see the timepicker update:

import { useState, useEffect, useRef, useMemo } from 'react';
import { TimepickerUI } from 'timepicker-ui';

function DynamicTimepicker() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<TimepickerUI | null>(null);
  const [clockType, setClockType] = useState<'12h' | '24h'>('12h');
  const [theme, setTheme] = useState<'basic' | 'dark'>('basic');

  const options = useMemo(() => ({
    clock: { type: clockType },
    ui: { theme },
  }), [clockType, theme]);

  useEffect(() => {
    if (!inputRef.current) return;

    if (!pickerRef.current) {
      // Create picker only once
      pickerRef.current = new TimepickerUI(inputRef.current, options);
      pickerRef.current.create();
    }

    return () => {
      // Cleanup on unmount
      pickerRef.current?.destroy();
      pickerRef.current = null;
    };
  }, []); // Empty deps - run only once

  // Update picker when options change
  useEffect(() => {
    if (pickerRef.current) {
      pickerRef.current.update({ options });
    }
  }, [options]);

  return (
    <>
      <button onClick={() => setClockType(
        clockType === '12h' ? '24h' : '12h'
      )}>
        Toggle Format
      </button>
      <input ref={inputRef} type="text" />
    </>
  );
}

Update Method

The update method allows you to change options without destroying the picker:

import { TimepickerUI } from 'timepicker-ui';

const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  clock: { type: '12h' },
  ui: { theme: 'basic' }
});

picker.create();

// Later, update options
picker.update({
  options: {
    clock: { type: '24h' },
    ui: { theme: 'dark' }
  }
});

// Or with create option to reinitialize
picker.update({
  options: {
    clock: { type: '12h' }
  },
  create: true
});

Update with Callbacks

Update options including event callbacks:

import { TimepickerUI } from 'timepicker-ui';

const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input);
picker.create();

// Update with new callbacks
picker.update({
  options: {
    callbacks: {
      onConfirm: (data) => {
        console.log('New time selected:', data);
      },
      onCancel: () => {
        console.log('Selection cancelled');
      }
    }
  }
});

Conditional Updates

Update picker based on user preferences or app state:

import { TimepickerUI } from 'timepicker-ui';

const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input);
picker.create();

// Update based on user preference
function updatePickerTheme(isDarkMode: boolean) {
  picker.update({
    options: {
      ui: { theme: isDarkMode ? 'dark' : 'basic' }
    }
  });
}

// Update based on device
function updateForMobile(isMobile: boolean) {
  picker.update({
    options: {
      ui: {
        mobile: isMobile,
        animation: !isMobile // Disable animation on mobile
      }
    }
  });
}

// Listen to system theme changes
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => {
    updatePickerTheme(e.matches);
  });