From bef65c520bcd725370e0e3fca63e57f40aa5c610 Mon Sep 17 00:00:00 2001
From: Vikram Kumar <vikrambgs12@gmail.com>
Date: Thu, 23 Jul 2026 23:09:37 +0530
Subject: [PATCH 1/2] feat: add liveDrawArrow option to arrowOptions

---
 docs/D_OptionsApi.mdx                         | 20 ++++++++++++-------
 docs/stories/options/ArrowOptions.stories.tsx | 20 +++++++++++++++++++
 src/Arrows.tsx                                |  3 +++
 src/ChessboardProvider.tsx                    | 11 +++++++---
 src/defaults.ts                               |  1 +
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/docs/D_OptionsApi.mdx b/docs/D_OptionsApi.mdx
index 4911888..14d62cf 100644
--- a/docs/D_OptionsApi.mdx
+++ b/docs/D_OptionsApi.mdx
@@ -256,6 +256,10 @@ When drawing an arrow, you can hold down modifier keys to change the arrow color
 - `opacity`: Controls the opacity of arrows when not being drawn
 - `activeOpacity`: Controls the opacity of arrows when they are being drawn
 
+#### Arrow behavior
+
+- `liveDrawArrow`: Controls whether the arrow is drawn live while dragging (`true`) or drawn after the final target is set (`false`)
+
 **Default value:**
 
 ```tsx
@@ -274,6 +278,7 @@ When drawing an arrow, you can hold down modifier keys to change the arrow color
   opacity: 0.65,
   activeOpacity: 0.5,
   arrowStartOffset: 0,
+  liveDrawArrow: true,
 }
 ```
 
@@ -288,13 +293,14 @@ When drawing an arrow, you can hold down modifier keys to change the arrow color
     alt?: string;
     meta?: string;
   },
-  arrowLengthReducerDenominator: number,
-  sameTargetArrowLengthReducerDenominator: number,
-  arrowWidthDenominator: number,
-  activeArrowWidthMultiplier: number,
-  opacity: number,
-  activeOpacity: number
-  arrowStartOffset: number,
+  arrowLengthReducerDenominator?: number,
+  sameTargetArrowLengthReducerDenominator?: number,
+  arrowWidthDenominator?: number,
+  activeArrowWidthMultiplier?: number,
+  opacity?: number,
+  activeOpacity?: number,
+  arrowStartOffset?: number,
+  liveDrawArrow?: boolean,
 }
 ```
 
diff --git a/docs/stories/options/ArrowOptions.stories.tsx b/docs/stories/options/ArrowOptions.stories.tsx
index 215df32..1813cb9 100644
--- a/docs/stories/options/ArrowOptions.stories.tsx
+++ b/docs/stories/options/ArrowOptions.stories.tsx
@@ -33,6 +33,7 @@ export const ArrowOptions: Story = {
       opacity: 0.65,
       activeOpacity: 0.5,
       arrowStartOffset: 0,
+      liveDrawArrow: true,
     };
 
     // arrows
@@ -264,6 +265,25 @@ export const ArrowOptions: Story = {
               }
             />
           </div>
+
+          {/* Toggles */}
+          <div>
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+            >
+              <input
+                type="checkbox"
+                checked={arrowOptions.liveDrawArrow}
+                onChange={(e) =>
+                  setarrowOptions({
+                    ...arrowOptions,
+                    liveDrawArrow: e.target.checked,
+                  })
+                }
+              />
+              Live Draw Arrow
+            </label>
+          </div>
         </div>
 
         <button onClick={() => setarrowOptions(defaultArrowOptions)}>
diff --git a/src/Arrows.tsx b/src/Arrows.tsx
index d61ed8a..9e5de27 100644
--- a/src/Arrows.tsx
+++ b/src/Arrows.tsx
@@ -19,7 +19,10 @@ export function Arrows() {
   const viewBoxWidth = 2048;
   const viewBoxHeight = viewBoxWidth * (chessboardRows / chessboardColumns);
 
+  const liveDrawArrow = arrowOptions.liveDrawArrow ?? true;
+
   const currentlyDrawingArrow =
+    liveDrawArrow &&
     newArrowStartSquare &&
     newArrowOverSquare &&
     newArrowStartSquare !== newArrowOverSquare.square
diff --git a/src/ChessboardProvider.tsx b/src/ChessboardProvider.tsx
index 8e0a12e..92847ac 100644
--- a/src/ChessboardProvider.tsx
+++ b/src/ChessboardProvider.tsx
@@ -96,7 +96,7 @@ type ContextType = {
 
   allowDrawingArrows: Defined<ChessboardOptions['allowDrawingArrows']>;
   arrows: Defined<ChessboardOptions['arrows']>;
-  arrowOptions: Defined<ChessboardOptions['arrowOptions']>;
+  arrowOptions: typeof defaultArrowOptions;
 
   canDragPiece: ChessboardOptions['canDragPiece'];
   onMouseOutSquare: ChessboardOptions['onMouseOutSquare'];
@@ -186,7 +186,7 @@ export type ChessboardOptions = {
   // arrows
   allowDrawingArrows?: boolean;
   arrows?: Arrow[];
-  arrowOptions?: typeof defaultArrowOptions;
+  arrowOptions?: Partial<typeof defaultArrowOptions>;
   clearArrowsOnClick?: boolean;
   clearArrowsOnPositionChange?: boolean;
 
@@ -262,7 +262,7 @@ export function ChessboardProvider({
     // arrows
     allowDrawingArrows = true,
     arrows = [],
-    arrowOptions = defaultArrowOptions,
+    arrowOptions: userArrowOptions = defaultArrowOptions,
     clearArrowsOnClick = true,
     clearArrowsOnPositionChange = true,
 
@@ -281,6 +281,11 @@ export function ChessboardProvider({
     squareRenderer,
   } = options || {};
 
+  const arrowOptions = useMemo(
+    () => ({ ...defaultArrowOptions, ...userArrowOptions }),
+    [userArrowOptions],
+  );
+
   // the piece currently being dragged
   const [draggingPiece, setDraggingPiece] =
     useState<DraggingPieceDataType | null>(null);
diff --git a/src/defaults.ts b/src/defaults.ts
index fe78594..5f94114 100644
--- a/src/defaults.ts
+++ b/src/defaults.ts
@@ -85,4 +85,5 @@ export const defaultArrowOptions = {
   opacity: 0.65, // opacity of arrow when not being drawn
   activeOpacity: 0.5, // opacity of arrow when it is being drawn
   arrowStartOffset: 0, // how far from the center of the start square the arrow begins, as a fraction of square width (0 = center, 0.5 = edge). Values between 0.3-0.4 give a chess.com-like look where the arrow starts near the base of the piece. Values above 0.5 will start outside the square.
+  liveDrawArrow: true, // controls whether the arrow is drawn live while dragging or after final target set
 };

From 19f4ffefa1d7733eddf2349fe4e3daacb403c340 Mon Sep 17 00:00:00 2001
From: Vikram Kumar <vikrambgs12@gmail.com>
Date: Fri, 24 Jul 2026 04:46:20 +0530
Subject: [PATCH 2/2] feat: add knightArrow option to arrowOptions

---
 docs/D_OptionsApi.mdx                         |  3 +++
 docs/stories/options/ArrowOptions.stories.tsx | 18 ++++++++++++++++++
 src/Arrows.tsx                                |  6 +++++-
 src/ChessboardProvider.tsx                    |  2 +-
 src/defaults.ts                               |  1 +
 5 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/docs/D_OptionsApi.mdx b/docs/D_OptionsApi.mdx
index 14d62cf..8c5d1ef 100644
--- a/docs/D_OptionsApi.mdx
+++ b/docs/D_OptionsApi.mdx
@@ -259,6 +259,7 @@ When drawing an arrow, you can hold down modifier keys to change the arrow color
 #### Arrow behavior
 
 - `liveDrawArrow`: Controls whether the arrow is drawn live while dragging (`true`) or drawn after the final target is set (`false`)
+- `knightArrow`: Controls whether knight moves are rendered as L-shaped knight arrows (`true`) or direct arrows (`false`)
 
 **Default value:**
 
@@ -279,6 +280,7 @@ When drawing an arrow, you can hold down modifier keys to change the arrow color
   activeOpacity: 0.5,
   arrowStartOffset: 0,
   liveDrawArrow: true,
+  knightArrow: true,
 }
 ```
 
@@ -301,6 +303,7 @@ When drawing an arrow, you can hold down modifier keys to change the arrow color
   activeOpacity?: number,
   arrowStartOffset?: number,
   liveDrawArrow?: boolean,
+  knightArrow?: boolean,
 }
 ```
 
diff --git a/docs/stories/options/ArrowOptions.stories.tsx b/docs/stories/options/ArrowOptions.stories.tsx
index 1813cb9..f13f334 100644
--- a/docs/stories/options/ArrowOptions.stories.tsx
+++ b/docs/stories/options/ArrowOptions.stories.tsx
@@ -34,6 +34,7 @@ export const ArrowOptions: Story = {
       activeOpacity: 0.5,
       arrowStartOffset: 0,
       liveDrawArrow: true,
+      knightArrow: true,
     };
 
     // arrows
@@ -284,6 +285,23 @@ export const ArrowOptions: Story = {
               Live Draw Arrow
             </label>
           </div>
+          <div>
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+            >
+              <input
+                type="checkbox"
+                checked={arrowOptions.knightArrow}
+                onChange={(e) =>
+                  setarrowOptions({
+                    ...arrowOptions,
+                    knightArrow: e.target.checked,
+                  })
+                }
+              />
+              Knight Arrow
+            </label>
+          </div>
         </div>
 
         <button onClick={() => setarrowOptions(defaultArrowOptions)}>
diff --git a/src/Arrows.tsx b/src/Arrows.tsx
index 9e5de27..0b449ca 100644
--- a/src/Arrows.tsx
+++ b/src/Arrows.tsx
@@ -20,6 +20,7 @@ export function Arrows() {
   const viewBoxHeight = viewBoxWidth * (chessboardRows / chessboardColumns);
 
   const liveDrawArrow = arrowOptions.liveDrawArrow ?? true;
+  const knightArrow = arrowOptions.knightArrow ?? true;
 
   const currentlyDrawingArrow =
     liveDrawArrow &&
@@ -101,7 +102,10 @@ export function Arrows() {
         let pathD: string;
 
         // Knight move - draw an L-shaped arrow
-        if (r === Math.hypot(1, 2) * squareWidth) {
+        const isKnightMove =
+          Math.abs(r - Math.hypot(1, 2) * squareWidth) < 0.001 ||
+          r === Math.hypot(1, 2) * squareWidth;
+        if (knightArrow && isKnightMove) {
           // Determine which direction to draw the long leg first
           // We prioritize the longer axis for visual clarity
           const isVerticalFirst = Math.abs(dx) < Math.abs(dy);
diff --git a/src/ChessboardProvider.tsx b/src/ChessboardProvider.tsx
index 92847ac..beba0c8 100644
--- a/src/ChessboardProvider.tsx
+++ b/src/ChessboardProvider.tsx
@@ -574,7 +574,7 @@ export function ChessboardProvider({
         altKey?: boolean;
         metaKey?: boolean;
       },
-      ) => {
+    ) => {
       // TODO: remove support for legacy arrow color props in future breaking version
       let color = arrowOptions.color;
       if (arrowOptions.colors) {
diff --git a/src/defaults.ts b/src/defaults.ts
index 5f94114..27eea96 100644
--- a/src/defaults.ts
+++ b/src/defaults.ts
@@ -86,4 +86,5 @@ export const defaultArrowOptions = {
   activeOpacity: 0.5, // opacity of arrow when it is being drawn
   arrowStartOffset: 0, // how far from the center of the start square the arrow begins, as a fraction of square width (0 = center, 0.5 = edge). Values between 0.3-0.4 give a chess.com-like look where the arrow starts near the base of the piece. Values above 0.5 will start outside the square.
   liveDrawArrow: true, // controls whether the arrow is drawn live while dragging or after final target set
+  knightArrow: true, // controls whether knight moves are rendered as L-shaped knight arrows or direct arrows
 };