@uiw/react-github-corners
TypeScript icon, indicating that this package has built-in type declarations

1.5.16 • Public • Published

react-github-corners

CI jsDelivr CDN NPM Downloads npm version Open in unpkg

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.

npm version

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.

Package Sidebar

Install

npm i @uiw/react-github-corners

Weekly Downloads

158

Version

1.5.16

License

MIT

Unpacked Size

32.9 kB

Total Files

10

Last publish

Collaborators

  • uiwjs
  • wcjiang