@uiw/react-github-corners - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

lib/cjs/index.d.ts

@@ -9,4 +9,6 @@ import React from 'react';
     position?: 'left' | 'right';
+    fixed?: boolean;
+    zIndex?: number;
 }
 declare const _default: (props?: GitHubCornersProps) => JSX.Element;
 export default _default;

lib/cjs/index.js

@@ -22,2 +22,5 @@ "use strict";
       size = _props$size === void 0 ? 80 : _props$size,
+      _props$fixed = props.fixed,
+      fixed = _props$fixed === void 0 ? false : _props$fixed,
+      zIndex = props.zIndex,
       _props$bgColor = props.bgColor,
@@ -29,3 +32,3 @@ bgColor = _props$bgColor === void 0 ? '#151513' : _props$bgColor,
       position = _props$position === void 0 ? 'right' : _props$position,
-      otherProps = (0, _objectWithoutProperties2.default)(props, ["size", "bgColor", "color", "position"]);
+      otherProps = (0, _objectWithoutProperties2.default)(props, ["size", "fixed", "zIndex", "bgColor", "color", "position"]);
   var styl = position === 'left' ? {
@@ -49,5 +52,6 @@ left: 0,
       color: color,
-      position: 'absolute',
+      position: fixed ? 'fixed' : 'absolute',
       border: 0,
-      top: 0
+      top: 0,
+      zIndex: zIndex
     }, styl),
@@ -54,0 +58,0 @@ "aria-hidden": "true"

lib/cjs/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":["props","size","bgColor","color","position","otherProps","styl","left","transform","right","href","fill","border","top","transformOrigin"],"mappings":";;;;;;;;;;;;;;;AACA;;eAWe,oBAAoC;AAAA,MAAnCA,KAAmC,uEAAP,EAAO;AAAA,oBAC6CA,KAD7C,CACzCC,IADyC;AAAA,MACzCA,IADyC,4BAClC,EADkC;AAAA,uBAC6CD,KAD7C,CAC9BE,OAD8B;AAAA,MAC9BA,OAD8B,+BACpB,SADoB;AAAA,qBAC6CF,KAD7C,CACTG,KADS;AAAA,MACTA,KADS,6BACD,MADC;AAAA,wBAC6CH,KAD7C,CACOI,QADP;AAAA,MACOA,QADP,gCACkB,OADlB;AAAA,MAC8BC,UAD9B,0CAC6CL,KAD7C;AAEjD,MAAMM,IAAI,GAAGF,QAAQ,KAAK,MAAb,GAAsB;AAAEG,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,SAAS,EAAE;AAAtB,GAAtB,GAA+D;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAA5E;AAEA,SACE;AAAG,IAAA,IAAI,EAAET,KAAK,CAACU,IAAf;AAAqB,kBAAW;AAAhC,KAA4DL,UAA5D;AAAwE,IAAA,SAAS,EAAC;AAAlF,MACE;AACE,IAAA,KAAK,EAAEJ,IADT;AAEE,IAAA,MAAM,EAAEA,IAFV;AAGE,IAAA,OAAO,EAAC,aAHV;AAIE,IAAA,KAAK;AACHU,MAAAA,IAAI,EAAET,OADH;AAEHC,MAAAA,KAAK,EAAEA,KAFJ;AAGHC,MAAAA,QAAQ,EAAE,UAHP;AAIHQ,MAAAA,MAAM,EAAE,CAJL;AAKHC,MAAAA,GAAG,EAAE;AALF,OAMAP,IANA,CAJP;AAYE,mBAAY;AAZd,KAaE;AAAM,IAAA,CAAC,EAAC;AAAR,IAbF,EAcE;AACE,IAAA,CAAC,EAAC,0LADJ;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,KAAK,EAAE;AAAEQ,MAAAA,eAAe,EAAE;AAAnB,KAHT;AAIE,IAAA,SAAS,EAAC;AAJZ,IAdF,EAoBE;AACE,IAAA,CAAC,EAAC,qhBADJ;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,SAAS,EAAC;AAHZ,IApBF,CADF,CADF;AA8BD,C","sourcesContent":["\nimport React from 'react';\nimport './style/index.css';\n\nexport interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  href?: string;\n  size?: number;\n  bgColor?: string;\n  color?: string;\n  position?: 'left' | 'right';\n}\n\nexport default (props: GitHubCornersProps = {}) => {\n  const { size = 80, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;\n  const styl = position === 'left' ? { left: 0, transform: 'scale(-1, 1)' } : { right: 0 };\n  \n  return (\n    <a href={props.href} aria-label=\"View source on GitHub\" {...otherProps} className=\"github-corner\" >\n      <svg\n        width={size}\n        height={size}\n        viewBox=\"0 0 250 250\"\n        style={{\n          fill: bgColor,\n          color: color,\n          position: 'absolute',\n          border: 0,\n          top: 0,\n          ...styl,\n        }}\n        aria-hidden=\"true\">\n        <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\" />\n        <path\n          d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n          fill=\"currentColor\"\n          style={{ transformOrigin: '130px 106px' }}\n          className=\"octo-arm\"\n        />\n        <path\n          d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n          fill=\"currentColor\"\n          className=\"octo-body\"\n        />\n      </svg>\n    </a>\n  )\n}"]}
+{"version":3,"sources":["../../src/index.tsx"],"names":["props","size","fixed","zIndex","bgColor","color","position","otherProps","styl","left","transform","right","href","fill","border","top","transformOrigin"],"mappings":";;;;;;;;;;;;;;;AACA;;eAae,oBAAoC;AAAA,MAAnCA,KAAmC,uEAAP,EAAO;AAAA,oBACoEA,KADpE,CACzCC,IADyC;AAAA,MACzCA,IADyC,4BAClC,EADkC;AAAA,qBACoED,KADpE,CAC9BE,KAD8B;AAAA,MAC9BA,KAD8B,6BACtB,KADsB;AAAA,MACfC,MADe,GACoEH,KADpE,CACfG,MADe;AAAA,uBACoEH,KADpE,CACPI,OADO;AAAA,MACPA,OADO,+BACG,SADH;AAAA,qBACoEJ,KADpE,CACcK,KADd;AAAA,MACcA,KADd,6BACsB,MADtB;AAAA,wBACoEL,KADpE,CAC8BM,QAD9B;AAAA,MAC8BA,QAD9B,gCACyC,OADzC;AAAA,MACqDC,UADrD,0CACoEP,KADpE;AAEjD,MAAMQ,IAAI,GAAGF,QAAQ,KAAK,MAAb,GAAsB;AAAEG,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,SAAS,EAAE;AAAtB,GAAtB,GAA+D;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAA5E;AAEA,SACE;AAAG,IAAA,IAAI,EAAEX,KAAK,CAACY,IAAf;AAAqB,kBAAW;AAAhC,KAA4DL,UAA5D;AAAwE,IAAA,SAAS,EAAC;AAAlF,MACE;AACE,IAAA,KAAK,EAAEN,IADT;AAEE,IAAA,MAAM,EAAEA,IAFV;AAGE,IAAA,OAAO,EAAC,aAHV;AAIE,IAAA,KAAK;AACHY,MAAAA,IAAI,EAAET,OADH;AAEHC,MAAAA,KAAK,EAAEA,KAFJ;AAGHC,MAAAA,QAAQ,EAAEJ,KAAK,GAAG,OAAH,GAAa,UAHzB;AAIHY,MAAAA,MAAM,EAAE,CAJL;AAKHC,MAAAA,GAAG,EAAE,CALF;AAMHZ,MAAAA,MAAM,EAANA;AANG,OAOAK,IAPA,CAJP;AAaE,mBAAY;AAbd,KAcE;AAAM,IAAA,CAAC,EAAC;AAAR,IAdF,EAeE;AACE,IAAA,CAAC,EAAC,0LADJ;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,KAAK,EAAE;AAAEQ,MAAAA,eAAe,EAAE;AAAnB,KAHT;AAIE,IAAA,SAAS,EAAC;AAJZ,IAfF,EAqBE;AACE,IAAA,CAAC,EAAC,qhBADJ;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,SAAS,EAAC;AAHZ,IArBF,CADF,CADF;AA+BD,C","sourcesContent":["\nimport React from 'react';\nimport './style/index.css';\n\nexport interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  href?: string;\n  size?: number;\n  bgColor?: string;\n  color?: string;\n  position?: 'left' | 'right';\n  fixed?: boolean;\n  zIndex?: number;\n}\n\nexport default (props: GitHubCornersProps = {}) => {\n  const { size = 80, fixed = false, zIndex, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;\n  const styl = position === 'left' ? { left: 0, transform: 'scale(-1, 1)' } : { right: 0 };\n  \n  return (\n    <a href={props.href} aria-label=\"View source on GitHub\" {...otherProps} className=\"github-corner\" >\n      <svg\n        width={size}\n        height={size}\n        viewBox=\"0 0 250 250\"\n        style={{\n          fill: bgColor,\n          color: color,\n          position: fixed ? 'fixed' : 'absolute',\n          border: 0,\n          top: 0,\n          zIndex,\n          ...styl,\n        }}\n        aria-hidden=\"true\">\n        <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\" />\n        <path\n          d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n          fill=\"currentColor\"\n          style={{ transformOrigin: '130px 106px' }}\n          className=\"octo-arm\"\n        />\n        <path\n          d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n          fill=\"currentColor\"\n          className=\"octo-body\"\n        />\n      </svg>\n    </a>\n  )\n}"]}

lib/esm/index.d.ts

@@ -9,4 +9,6 @@ import React from 'react';
     position?: 'left' | 'right';
+    fixed?: boolean;
+    zIndex?: number;
 }
 declare const _default: (props?: GitHubCornersProps) => JSX.Element;
 export default _default;

lib/esm/index.js

@@ -11,2 +11,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       size = _props$size === void 0 ? 80 : _props$size,
+      _props$fixed = props.fixed,
+      fixed = _props$fixed === void 0 ? false : _props$fixed,
+      zIndex = props.zIndex,
       _props$bgColor = props.bgColor,
@@ -18,3 +21,3 @@ bgColor = _props$bgColor === void 0 ? '#151513' : _props$bgColor,
       position = _props$position === void 0 ? 'right' : _props$position,
-      otherProps = _objectWithoutProperties(props, ["size", "bgColor", "color", "position"]);
+      otherProps = _objectWithoutProperties(props, ["size", "fixed", "zIndex", "bgColor", "color", "position"]);
 
@@ -39,5 +42,6 @@ var styl = position === 'left' ? {
       color: color,
-      position: 'absolute',
+      position: fixed ? 'fixed' : 'absolute',
       border: 0,
-      top: 0
+      top: 0,
+      zIndex: zIndex
     }, styl),
@@ -44,0 +48,0 @@ "aria-hidden": "true"

lib/esm/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":["React","props","size","bgColor","color","position","otherProps","styl","left","transform","right","href","fill","border","top","transformOrigin"],"mappings":";;;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAO,mBAAP;AAUA,gBAAe,YAAoC;AAAA,MAAnCC,KAAmC,uEAAP,EAAO;;AAAA,oBAC6CA,KAD7C,CACzCC,IADyC;AAAA,MACzCA,IADyC,4BAClC,EADkC;AAAA,uBAC6CD,KAD7C,CAC9BE,OAD8B;AAAA,MAC9BA,OAD8B,+BACpB,SADoB;AAAA,qBAC6CF,KAD7C,CACTG,KADS;AAAA,MACTA,KADS,6BACD,MADC;AAAA,wBAC6CH,KAD7C,CACOI,QADP;AAAA,MACOA,QADP,gCACkB,OADlB;AAAA,MAC8BC,UAD9B,4BAC6CL,KAD7C;;AAEjD,MAAMM,IAAI,GAAGF,QAAQ,KAAK,MAAb,GAAsB;AAAEG,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,SAAS,EAAE;AAAtB,GAAtB,GAA+D;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAA5E;AAEA,SACE;AAAG,IAAA,IAAI,EAAET,KAAK,CAACU,IAAf;AAAqB,kBAAW;AAAhC,KAA4DL,UAA5D;AAAwE,IAAA,SAAS,EAAC;AAAlF,MACE;AACE,IAAA,KAAK,EAAEJ,IADT;AAEE,IAAA,MAAM,EAAEA,IAFV;AAGE,IAAA,OAAO,EAAC,aAHV;AAIE,IAAA,KAAK;AACHU,MAAAA,IAAI,EAAET,OADH;AAEHC,MAAAA,KAAK,EAAEA,KAFJ;AAGHC,MAAAA,QAAQ,EAAE,UAHP;AAIHQ,MAAAA,MAAM,EAAE,CAJL;AAKHC,MAAAA,GAAG,EAAE;AALF,OAMAP,IANA,CAJP;AAYE,mBAAY;AAZd,KAaE;AAAM,IAAA,CAAC,EAAC;AAAR,IAbF,EAcE;AACE,IAAA,CAAC,EAAC,0LADJ;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,KAAK,EAAE;AAAEQ,MAAAA,eAAe,EAAE;AAAnB,KAHT;AAIE,IAAA,SAAS,EAAC;AAJZ,IAdF,EAoBE;AACE,IAAA,CAAC,EAAC,qhBADJ;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,SAAS,EAAC;AAHZ,IApBF,CADF,CADF;AA8BD,CAlCD","sourcesContent":["\nimport React from 'react';\nimport './style/index.css';\n\nexport interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  href?: string;\n  size?: number;\n  bgColor?: string;\n  color?: string;\n  position?: 'left' | 'right';\n}\n\nexport default (props: GitHubCornersProps = {}) => {\n  const { size = 80, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;\n  const styl = position === 'left' ? { left: 0, transform: 'scale(-1, 1)' } : { right: 0 };\n  \n  return (\n    <a href={props.href} aria-label=\"View source on GitHub\" {...otherProps} className=\"github-corner\" >\n      <svg\n        width={size}\n        height={size}\n        viewBox=\"0 0 250 250\"\n        style={{\n          fill: bgColor,\n          color: color,\n          position: 'absolute',\n          border: 0,\n          top: 0,\n          ...styl,\n        }}\n        aria-hidden=\"true\">\n        <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\" />\n        <path\n          d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n          fill=\"currentColor\"\n          style={{ transformOrigin: '130px 106px' }}\n          className=\"octo-arm\"\n        />\n        <path\n          d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n          fill=\"currentColor\"\n          className=\"octo-body\"\n        />\n      </svg>\n    </a>\n  )\n}"]}
+{"version":3,"sources":["../../src/index.tsx"],"names":["React","props","size","fixed","zIndex","bgColor","color","position","otherProps","styl","left","transform","right","href","fill","border","top","transformOrigin"],"mappings":";;;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAO,mBAAP;AAYA,gBAAe,YAAoC;AAAA,MAAnCC,KAAmC,uEAAP,EAAO;;AAAA,oBACoEA,KADpE,CACzCC,IADyC;AAAA,MACzCA,IADyC,4BAClC,EADkC;AAAA,qBACoED,KADpE,CAC9BE,KAD8B;AAAA,MAC9BA,KAD8B,6BACtB,KADsB;AAAA,MACfC,MADe,GACoEH,KADpE,CACfG,MADe;AAAA,uBACoEH,KADpE,CACPI,OADO;AAAA,MACPA,OADO,+BACG,SADH;AAAA,qBACoEJ,KADpE,CACcK,KADd;AAAA,MACcA,KADd,6BACsB,MADtB;AAAA,wBACoEL,KADpE,CAC8BM,QAD9B;AAAA,MAC8BA,QAD9B,gCACyC,OADzC;AAAA,MACqDC,UADrD,4BACoEP,KADpE;;AAEjD,MAAMQ,IAAI,GAAGF,QAAQ,KAAK,MAAb,GAAsB;AAAEG,IAAAA,IAAI,EAAE,CAAR;AAAWC,IAAAA,SAAS,EAAE;AAAtB,GAAtB,GAA+D;AAAEC,IAAAA,KAAK,EAAE;AAAT,GAA5E;AAEA,SACE;AAAG,IAAA,IAAI,EAAEX,KAAK,CAACY,IAAf;AAAqB,kBAAW;AAAhC,KAA4DL,UAA5D;AAAwE,IAAA,SAAS,EAAC;AAAlF,MACE;AACE,IAAA,KAAK,EAAEN,IADT;AAEE,IAAA,MAAM,EAAEA,IAFV;AAGE,IAAA,OAAO,EAAC,aAHV;AAIE,IAAA,KAAK;AACHY,MAAAA,IAAI,EAAET,OADH;AAEHC,MAAAA,KAAK,EAAEA,KAFJ;AAGHC,MAAAA,QAAQ,EAAEJ,KAAK,GAAG,OAAH,GAAa,UAHzB;AAIHY,MAAAA,MAAM,EAAE,CAJL;AAKHC,MAAAA,GAAG,EAAE,CALF;AAMHZ,MAAAA,MAAM,EAANA;AANG,OAOAK,IAPA,CAJP;AAaE,mBAAY;AAbd,KAcE;AAAM,IAAA,CAAC,EAAC;AAAR,IAdF,EAeE;AACE,IAAA,CAAC,EAAC,0LADJ;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,KAAK,EAAE;AAAEQ,MAAAA,eAAe,EAAE;AAAnB,KAHT;AAIE,IAAA,SAAS,EAAC;AAJZ,IAfF,EAqBE;AACE,IAAA,CAAC,EAAC,qhBADJ;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,SAAS,EAAC;AAHZ,IArBF,CADF,CADF;AA+BD,CAnCD","sourcesContent":["\nimport React from 'react';\nimport './style/index.css';\n\nexport interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  href?: string;\n  size?: number;\n  bgColor?: string;\n  color?: string;\n  position?: 'left' | 'right';\n  fixed?: boolean;\n  zIndex?: number;\n}\n\nexport default (props: GitHubCornersProps = {}) => {\n  const { size = 80, fixed = false, zIndex, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;\n  const styl = position === 'left' ? { left: 0, transform: 'scale(-1, 1)' } : { right: 0 };\n  \n  return (\n    <a href={props.href} aria-label=\"View source on GitHub\" {...otherProps} className=\"github-corner\" >\n      <svg\n        width={size}\n        height={size}\n        viewBox=\"0 0 250 250\"\n        style={{\n          fill: bgColor,\n          color: color,\n          position: fixed ? 'fixed' : 'absolute',\n          border: 0,\n          top: 0,\n          zIndex,\n          ...styl,\n        }}\n        aria-hidden=\"true\">\n        <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\" />\n        <path\n          d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\"\n          fill=\"currentColor\"\n          style={{ transformOrigin: '130px 106px' }}\n          className=\"octo-arm\"\n        />\n        <path\n          d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\"\n          fill=\"currentColor\"\n          className=\"octo-body\"\n        />\n      </svg>\n    </a>\n  )\n}"]}

package.json

 {
   "name": "@uiw/react-github-corners",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Add a Github corner to your project page, This GitHub corners for react component.",
@@ -5,0 +5,0 @@ "main": "lib/cjs/index.js",

README.md

@@ -47,2 +47,4 @@ react-github-corners
 | position | String | `left`/`right` | The position of corner. |
+| fixed | Boolean | `false` | It is positioned relative to the initial containing block established. |
+| zIndex | Number | - | Sets the z-order of a positioned element and its descendants or flex items. |
 
@@ -49,0 +51,0 @@ ## Development

src/index.tsx

@@ -11,6 +11,8 @@
   position?: 'left' | 'right';
+  fixed?: boolean;
+  zIndex?: number;
 }
 
 export default (props: GitHubCornersProps = {}) => {
-  const { size = 80, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;
+  const { size = 80, fixed = false, zIndex, bgColor = '#151513', color = '#fff', position = 'right', ...otherProps } = props;
   const styl = position === 'left' ? { left: 0, transform: 'scale(-1, 1)' } : { right: 0 };
@@ -27,5 +29,6 @@
           color: color,
-          position: 'absolute',
+          position: fixed ? 'fixed' : 'absolute',
           border: 0,
           top: 0,
+          zIndex,
           ...styl,
@@ -32,0 +35,0 @@ }}

No alert changes

Improved metrics

Total package byte prevSize

23458

5.84%

Lines of code

345

4.55%

Number of lines in readme file

65

3.17%

No dependency changes