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

``bash
npm install --save @uiw/react-github-corners


Via Yarn:


yarn add @uiw/react-github-corners
`

Or use Web Components

`bash
npm install --save @uiw/github-corners
`

Or load the ES module directly through unpkg

unpkg.com CDN:

`html

`

Skypack CDN:

`html

`

Usage

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

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

Use it in your HTML:

`html

`

Learn about web components here.

![npm version](https://www.npmjs.com/package/@uiw/github-corners)

Using web components in React:

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

function Demo() {
return (

);
}
`

React Props

`typescript
interface GitHubCornersProps extends React.AnchorHTMLAttributes {
/**
* 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.

`bash


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.

`bash
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.