Never Publish Malarkey

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

    1.5.14 • 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.

    Install

    npm i @uiw/react-github-corners

    DownloadsWeekly Downloads

    225

    Version

    1.5.14

    License

    MIT

    Unpacked Size

    41.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • wcjiang