@uiw/react-github-corners

react-github-corners

Add a Github corner to your project page, This GitHub corners for @react component. Visit https://uiwjs.github.io/react-github-corners to preview the example effects.

Preview Example: Github | Gitee

npm install --save @uiw/react-github-corners
# Via Yarn:
yarn add @uiw/react-github-corners

Usage

import GitHubCorners from '@uiw/react-github-corners';

function Demo() {
  return (
    <GitHubCorners
      position="left"
      href="https://github.com/uiwjs/react-github-corners"
    />
  )
}

Props

interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /**
   * The link to your project page.
   */
  href?: string;
  /**
   * The width and height of the corner. 
   * Default: `80`
   */
  size?: number;
  /**
   * The background color of the corner.
   * Default: `#151513`
   */
  bgColor?: string;
  /**
   * The Github logo color of the corner.
   * Default: `#fff`
   */
  color?: string;
  /**
   * The position of corner. 
   * Default: `right`
   */
  position?: 'left' | 'right';
  /**
   * It is positioned relative to the initial containing block established.
   * Default: `false`
   */
  fixed?: boolean;
  /**
   * Sets the z-order of a positioned element and its descendants or flex items.
   */
  zIndex?: number;
}

Property Name	Type	Default Value	Description
href	String	-	The link to your project page.
size	String	80	The width and height of the corner.
bgColor	String	#151513	The background color of the corner.
color	String	#fff	The Github logo color of the corner.
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.

Development

Runs the project in development mode.

# Step 1, run first, listen to the component compile and output the .js file
npm run build
# Step 2, listen for compilation output type .d.ts file
npm run types:watch
# Step 3, development mode, listen to compile preview website instance
npm run doc:dev

Builds the app for production to the build folder.

npm run build
npm run doc

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

License

Licensed under the MIT License.