refactor: rename keyboardMovementIncrement to keyboardIncrement

README.md

@@ -81,7 +81,7 @@ See the [Images docs](https://react-compare-slider.vercel.app/?path=/docs/docs-i
 | [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page) | `ReactNode` |   | `undefined` | Custom handle component. |
 | `itemOne`   | `ReactNode` | ✓ | `undefined` | First component to show in slider. |
 | `itemTwo`   | `ReactNode` | ✓ | `undefined` | Second component to show in slider. |
-| `keyboardMovementIncrement`   | `number` |  | `20` | How many pixels to move when the slider is focused and keyboard arrow is pressed. |
+| `keyboardIncrement`   | `number` |  | `20` | How many pixels to move when the slider is focused and keyboard arrow is pressed. |
 | [`onlyHandleDraggable`](https://react-compare-slider.vercel.app/?path=/story/docs-only-handle-draggable--page) | `boolean`  |   | `false` | Whether to only change position when handle is interacted with (useful for touch devices). |
 | [`onPositionChange`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change)  | `function`  |   | `undefined` | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
 | [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait) | `boolean`   |   | `false` | Whether to use portrait orientation. |

src/ReactCompareSlider.tsx

@@ -36,7 +36,7 @@ export const ReactCompareSlider: React.FC<ReactCompareSliderDetailedProps> = ({
   position = 50,
   boundsPadding = 0,
   changePositionOnHover = false,
-  keyboardMovementIncrement = 20,
+  keyboardIncrement = 20,
   style,
   ...props
 }): React.ReactElement => {
@@ -263,13 +263,8 @@ export const ReactCompareSlider: React.FC<ReactCompareSliderDetailedProps> = ({
       const isIncrement =
         ev.key == KeyboardEventKeys.ARROW_UP || ev.key == KeyboardEventKeys.ARROW_RIGHT;
 
-      const offsetX = isIncrement
-        ? right - keyboardMovementIncrement
-        : left + keyboardMovementIncrement;
-
-      const offsetY = isIncrement
-        ? top + keyboardMovementIncrement
-        : bottom - keyboardMovementIncrement;
+      const offsetX = isIncrement ? right - keyboardIncrement : left + keyboardIncrement;
+      const offsetY = isIncrement ? top + keyboardIncrement : bottom - keyboardIncrement;
 
       updateInternalPosition({
         portrait,
@@ -279,7 +274,7 @@ export const ReactCompareSlider: React.FC<ReactCompareSliderDetailedProps> = ({
         isOffset: true,
       });
     },
-    [boundsPadding, keyboardMovementIncrement, portrait, updateInternalPosition]
+    [boundsPadding, keyboardIncrement, portrait, updateInternalPosition]
   );
 
   // Allow drag outside of container while pointer is still down.

src/types.ts

@@ -22,7 +22,7 @@ export interface ReactCompareSliderProps extends Partial<ReactCompareSliderCommo
   /** Second item to show. */
   itemTwo: React.ReactNode;
   /** How many pixels to move when the slider is focused and keyboard arrow is pressed. */
-  keyboardMovementIncrement?: number;
+  keyboardIncrement?: number;
   /** Whether to only change position when handle is interacted with (useful for touch devices). */
   onlyHandleDraggable?: boolean;
   /** Callback on position change with position as percentage. */