feat: added support for opening in the current tab

demo/App.module.scss

@@ -0,0 +1,8 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  gap: 10px;
+}

demo/App.tsx

@@ -1,10 +1,13 @@
 import { ForkMe } from '../src';
+import * as styles from './App.module.scss';
 
 export function App() {
   return (
-    <div>
-      <ForkMe slug="rain-cafe/fork-me" backgroundColor="white" color="#272727" />
+    <div className={styles.app}>
+      <ForkMe slug="rain-cafe/fork-me" backgroundColor="white" color="#272727" newTab={false} />
       <ForkMe slug="rain-cafe/fork-me" backgroundColor="white" color="#272727" side="left" />
+      <div>Left side opens a new tab</div>
+      <div>Right side uses this tab</div>
     </div>
   );
 }

demo/index.html

@@ -8,6 +8,9 @@
     <style>
       body {
         background-color: #272727;
+        color: white;
+        margin: 0;
+        font-family: Arial, Helvetica, sans-serif;
       }
     </style>
   </head>

package.json

@@ -34,6 +34,7 @@
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "parcel": "^2.9.3",
+    "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-jest": "^29.1.1",

src/ForkMe.tsx

@@ -26,15 +26,28 @@ export type ForkMeProps = {
    * The side you'd like the octocat to appear!
    */
   side?: 'left' | 'right';
+
+  /**
+   * Set this to false to make it open in the current tab.
+   *
+   * @default true
+   */
+  newTab?: boolean;
 };
 
-export function ForkMe({ slug, backgroundColor = 'black', color = 'white', side = 'right' }: ForkMeProps) {
+export function ForkMe({
+  slug,
+  backgroundColor = 'black',
+  color = 'white',
+  side = 'right',
+  newTab = true,
+}: ForkMeProps) {
   return (
     <a
       href={`https://github.com/${slug}`}
       className={`${styles.forkMe} ${styles[side]}`}
       style={{ fill: backgroundColor, color: color }}
-      target="_blank"
+      target={newTab ? '_blank' : undefined}
       data-testid="fork-me"
     >
       <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">

src/__tests__/index.spec.tsx

@@ -17,7 +17,7 @@ describe('component(ForkMe)', () => {
 
       const anchor = component.getByTestId('fork-me') as HTMLAnchorElement;
 
-      expect(anchor.href).toContain(`https://github.com/rain-cafe/utils`);
+      expect(anchor.href).toEqual(`https://github.com/rain-cafe/utils`);
     });
   });
 
@@ -44,4 +44,22 @@ describe('component(ForkMe)', () => {
       expect(component.getByTestId('fork-me').style.fill).toEqual('black');
     });
   });
+
+  describe('prop(newTab)', () => {
+    it('should default to opening in a new tab', () => {
+      const component = render(<ForkMe slug="rain-cafe/fork-me" color="black" />);
+
+      const anchor = component.getByTestId('fork-me') as HTMLAnchorElement;
+
+      expect(anchor.target).toEqual('_blank');
+    });
+
+    it('should support opening in the current tab', () => {
+      const component = render(<ForkMe slug="rain-cafe/fork-me" color="black" newTab={false} />);
+
+      const anchor = component.getByTestId('fork-me') as HTMLAnchorElement;
+
+      expect(anchor.target).toEqual('');
+    });
+  });
 });

yarn.lock

@@ -1909,6 +1909,7 @@ __metadata:
     jest: ^29.6.2
     jest-environment-jsdom: ^29.6.2
     parcel: ^2.9.3
+    process: ^0.11.10
     react: ^18.2.0
     react-dom: ^18.2.0
     ts-jest: ^29.1.1
@@ -6781,6 +6782,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"process@npm:^0.11.10":
+  version: 0.11.10
+  resolution: "process@npm:0.11.10"
+  checksum: bfcce49814f7d172a6e6a14d5fa3ac92cc3d0c3b9feb1279774708a719e19acd673995226351a082a9ae99978254e320ccda4240ddc474ba31a76c79491ca7c3
+  languageName: node
+  linkType: hard
+
 "progress@npm:^2.0.3":
   version: 2.0.3
   resolution: "progress@npm:2.0.3"