@uiw/react-github-corners NPM

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

Installation

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

Or use Web Components

npm install --save @uiw/github-corners

Or load the ES module directly through unpkg

unpkg.com CDN:

<script type="module" src="https://unpkg.com/@uiw/github-corners?module"></script>

Skypack CDN:

<script type="module" src="https://cdn.skypack.dev/@uiw/github-corners"></script>

Usage

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

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

Use it in your HTML:

<github-corners target="__blank" position="fixed" href="https://github.com/uiwjs/react-github-corners"></github-corners>

Learn about web components here.

Using web components in React:

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

function Demo() {
  return (
    <github-corners target="__blank" position="fixed" href="https://github.com/uiwjs/react-github-corners"></github-corners>
  );
}

React 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 hoist
# Step 2, listen for compilation output type .d.ts file
npm run watch:wc
npm run watch
# Step 3, development mode, listen to compile preview website instance
npm run start

Builds the app for production to the build folder.