add 'noHours' flag

.eslintrc.json

@@ -17,7 +17,8 @@
     "no-unused-vars": ["warn"],
     "react/jsx-one-expression-per-line": ["off"],
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "react/no-unused-prop-types": "warn"
   },
   "extends": ["airbnb", "prettier"]
 }

README.md

@@ -17,6 +17,7 @@ Then in your React component:
 | onChange        | ({hours: number, minutes: number, seconds: number}) => void | () => {}                           | Callback executed by DurationPicker whenever the duration displayed on the picker is updated |
 | initialDuration | {hours: number, minutes: number, seconds: number}           | {hours: 0, minutes: 0, seconds: 0} | Duration to display on first render                                                          |
 | maxHours        | number                                                      | 10                                 | Max number of hours that can be selected                                                     |
+| noHours         | boolean                                                     | false                              | If true, omits 'hours' column from picker                                                    |
 
 # Example
 

src/DurationPicker.jsx

@@ -11,16 +11,18 @@ DurationPicker.propTypes = {
     seconds: PropTypes.number,
   }),
   maxHours: PropTypes.number,
+  noHours: PropTypes.bool,
 };
 
 DurationPicker.defaultProps = {
   maxHours: 10,
   onChange: () => {},
   initialDuration: { hours: 0, minutes: 0, seconds: 0 },
+  noHours: false,
 };
 
 function DurationPicker(props) {
-  const { onChange, maxHours, initialDuration } = props;
+  const { onChange, maxHours, initialDuration, noHours } = props;
   const [isSmallScreen, setIsSmallScreen] = useState(undefined);
   const [duration, setDuration] = useState(initialDuration);
 
@@ -57,13 +59,15 @@ function DurationPicker(props) {
   }, [duration, onChange]);
   return (
     <div className="rdp-picker">
-      <DurationPickerColumn
-        onChange={onChangeHours}
-        unit="hours"
-        maxHours={maxHours}
-        isSmallScreen={isSmallScreen}
-        initial={initialDuration.hours}
-      />
+      {!noHours && (
+        <DurationPickerColumn
+          onChange={onChangeHours}
+          unit="hours"
+          maxHours={maxHours}
+          isSmallScreen={isSmallScreen}
+          initial={initialDuration.hours}
+        />
+      )}
       <DurationPickerColumn
         onChange={onChangeMinutes}
         unit="mins"