App.js

// Example usage
<XYFrame
   margin={ { top: 20, bottom: 80, left: 70, right: 20 } }
   size={[500,300]}
   xAccessor={ d => d[0] }
   yAccessor={ d => d[1] }
   lines={ lines }
   lineStyle={d => ({
    stroke: "pink",
    strokeWidth: 2
   })}
   showLinePoints={ true }
   pointStyle={{ r: 4, fill: "hotpink", stroke: "white", strokeWidth: 0 }}
   //legend = {true}
   axes={[
	{ orient: "left", mainAxisLine: true, tickSize: -5 },
	{ orient: "bottom", mainAxisLine: true, tickSize: -5, label: {
        name: "Standard X, Y axes with main axis lines",
        position: { anchor: "middle" }, // start|middle|end
        anchor: "end",
        locationDistance: 50
      } },
   ]}
/>

axis.js

// Added these two methods to axis.js

const mainAxisLineGenerator = ({ xExtent, yExtent, xScale, yScale, orient }) => {
  
	let path = "";

    switch (orient) {
    case "top":
      path = `M${xScale(xExtent[0])}, ${yScale(yExtent[1])}L${xScale(xExtent[1])}, ${yScale(yExtent[1])}`;
      break;
    case "bottom":
      path = `M${xScale(xExtent[0])}, ${yScale(yExtent[0])}L${xScale(xExtent[1])}, ${yScale(yExtent[0])}`;
      break;
    case "right":
      path = `M${xScale(xExtent[1])}, ${yScale(yExtent[0])}L${xScale(xExtent[1])}, ${yScale(yExtent[1])}`;
	  break;
    //left
    default:
      path = `M${xScale(xExtent[0])}, ${yScale(yExtent[0])}L${xScale(xExtent[0])}, ${yScale(yExtent[1])}`;
	  break;
  }
    
  return (
  <Mark
    markType="path"
    stroke="black"
    strokeWidth="1px"
    simpleInterpolate={true}
    d={path}
    className={`main-axis-line ${orient}`}
  />
)};

export const mainAxisLine = ({ mainAxisLine = false, xExtent, yExtent, xScale, yScale, orient }) => {
 {
  if(mainAxisLine) {
	return mainAxisLineGenerator({ xExtent, yExtent, xScale, yScale, orient });
  }
}
};

XYFrame.js

// Import the new method
import { axisPieces, axisLines, mainAxisLine } from "./visualizationLayerBehavior/axis";

// ...

// Update axisTickLines() at approx. line 298
const axisTickLines = (
  <g key={`axes-tick-lines-${i}`} className={`axis ${d.className}`}>
    { axisLines({ axisParts, orient: d.orient, tickLineGenerator: d.tickLineGenerator }) }
    { mainAxisLine({ mainAxisLine: d.mainAxisLine, xExtent, yExtent, xScale, yScale, orient: d.orient }) }
  </g>
);