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
npm install --save @uiw/react-github-corners
# Via Yarn:
yarn add @uiw/react-github-cornersOr use Web Components
npm install --save @uiw/github-cornersOr 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>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>
);
}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. |
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 startBuilds the app for production to the build folder.
npm run build:all
npm run docThe build is minified and the filenames include the hashes. Your app is ready to be deployed!
As always, thanks to our amazing contributors!
Made with action-contributors.
Licensed under the MIT License.