@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

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.

npm run build:all
npm run doc

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

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.