Install

npm install --save @uiw/react-shields# Via Yarn:yarn add @uiw/react-shields

Usage

import{Github,Coverage,Npm}from'@uiw/react-shields';// OrimportNpmfrom'@uiw/react-shields/npm';importCoveragefrom'@uiw/react-shields/coverage';importGithubfrom'@uiw/react-shields/github';

importReactfrom'react';importGithubfrom'@uiw/react-shields/github';exportdefaultfunctionDemo(){return(<><Github.Issuesuser="uiwjs"repo="uiw"/><Githubuser="uiwjs"repo="uiw"><Github.Issueshref="https://github.com/uiwjs/uiw"type="issues"/><Github.Issuestype="issues-raw"/><Github.Issuestype="issues-closed"/></Github><Github.Sizeuser="uiwjs"repo="uiw"/><Githubuser="uiwjs"repo="uiw"><Github.Size/><Github.Sizetype="repo-size"/><Github.Sizetype="size"/></Github></>);}

Github.Social

importReactfrom'react';importGithubfrom'@uiw/react-shields/github';exportdefaultfunctionDemo(){return(<><Github.Socialuser="jaywcjlove"repo="uiw"href="https://github.com/jaywcjlove"/><Githubuser="jaywcjlove"repo="awesome-mac"><Github.Socialtype="forks"/><Github.Socialtype="stars"/><Github.Socialtype="watchers"/><Github.Socialtype="followers"/></Github></>);}

Npm.Version

importReactfrom'react';importNpmfrom'@uiw/react-shields/npm';exportdefaultfunctionDemo(){return(<><Npm.Versionscope="@uiw"packageName="react-shields"href="https://npmjs.com/@uiw/react-shields"/><Npm><Npm.Versionscope="@uiw"packageName="react-github-corners"/><Npm.VersionpackageName="hotkeys-js"/><Npm.VersionpackageName="kkt"version="latest"/><Npm.VersionpackageName="tsbb"/><Npm.Versionscope="@uiw"type="peer-dependency"dependency="react"packageName="react-github-corners"/></Npm></>);}

Npm.Size

importReactfrom'react';importNpmfrom'@uiw/react-shields/npm';exportdefaultfunctionDemo(){return(<><Npm.Sizescope="@uiw"packageName="react-shields"href="https://npmjs.com/@uiw/react-shields"/><Npm><Npm.Sizeformat="minzip"scope="@uiw"packageName="react-github-corners"/><Npm.SizepackageName="hotkeys-js"/><Npm.SizepackageName="kkt"version="latest"/></Npm></>);}

importReactfrom'react';importNpmfrom'@uiw/react-shields/npm';exportdefaultfunctionDemo(){const[scope,setScope]=React.useState('@uiw');const[packageName,setPackageName]=React.useState('react-shields');return(<><Npm.Sizescope={scope}packageName={packageName}/><div><buttononClick={()=>setPackageName('react-shields')}>react-shields</button><buttononClick={()=>setPackageName('react-codemirror')}>react-codemirror</button></div></>);}

Npm.Downloads

importReactfrom'react';importNpmfrom'@uiw/react-shields/npm';exportdefaultfunctionDemo(){return(<><Npm.Downloadsscope="@uiw"packageName="react-shields"href="https://npmjs.com/@uiw/react-shields"/><Npm><Npm.Downloadsinterval="dw"scope="@uiw"packageName="react-github-corners"/><Npm.DownloadspackageName="hotkeys-js"/></Npm></>);}

Github.Issues

importReactfrom'react';importGithubfrom'@uiw/react-shields/github';exportdefaultfunctionDemo(){return(<><Github.Issuesuser="uiwjs"repo="uiw"href="https://github.com/uiwjs/react-shields/issues"/><Githubuser="uiwjs"repo="uiw"><Github.Issuestype="issues"href="https://github.com/uiwjs/react-shields/issues"/><Github.Issuestype="issues-raw"/><Github.Issuestype="issues-closed"/><Github.Issuestype="issues-closed-raw"/><Github.Issuestype="issues-pr"/><Github.Issuestype="issues-pr-raw"/><Github.Issuestype="issues-pr-closed"/><Github.Issuestype="issues-pr-closed-raw"/><Github.Issuestype="issues"label="bug"/><Github.Issuestype="issues-raw"label="bug"/><Github.Issuestype="issues-pr"label="bug"/><Github.Issuestype="issues-pr-raw"label="bug"/></Github></>);}

Github.Size

importReactfrom'react';importGithubfrom'@uiw/react-shields/github';exportdefaultfunctionDemo(){return(<><Github.Sizeuser="uiwjs"repo="uiw"/><Githubuser="uiwjs"repo="uiw"><Github.Size/><Github.Sizetype="repo-size"/><Github.Sizetype="size"/></Github></>);}

Github.Downloads

importReactfrom'react';importGithubfrom'@uiw/react-shields/github';exportdefaultfunctionDemo(){return(<><Github.Downloadsuser="uiwjs"repo="uiw"href="https://github.com/uiwjs/uiw/issues"/><Githubuser="uiwjs"repo="uiw"><Github.Downloads/><Github.Downloadstotal={false}/><Github.Downloadstype="downloads-pre"/><Github.Downloadstotal={false}tag="v3.9.0"/><Github.Downloadstag="v3.9.0"/></Github></>);}

Github.Version

importReactfrom'react';importGithubfrom'@uiw/react-shields/github';exportdefaultfunctionDemo(){return(<><Github.Versionuser="uiwjs"repo="uiw"href="https://github.com/uiwjs/uiw/issues"/><Githubuser="uiwjs"repo="uiw"><Github.Versiontype="version-tag"href="https://github.com/uiwjs/uiw/issues"/><Github.Versiontype="package-json"/><Github.Versiontype="package-json"branch="dev"/><Github.Versionuser="jaywcjlove"repo="wxmp"type="manifest-json"/><Github.Versionuser="jaywcjlove"repo="wxmp"type="manifest-json"branch="master"/><Github.Versionuser="x-mod"repo="routine"type="go-mod"/><Github.Versionuser="x-mod"repo="routine"type="go-mod"branch="master"/></Github></>);}

Github.License

importReactfrom'react';importGithubfrom'@uiw/react-shields/github';exportdefaultfunctionDemo(){return(<><Github.Licenseuser="uiwjs"repo="uiw"href="https://github.com/uiwjs/uiw/blob/master/LICENSE"/><Githubuser="uiwjs"repo="uiw"><Github.License/></Github></>);}

Github.Analysis

importReactfrom'react';importGithubfrom'@uiw/react-shields/github';exportdefaultfunctionDemo(){return(<><Github.Analysisuser="uiwjs"repo="uiw"href="https://github.com/uiwjs/uiw/issues"/><Githubuser="uiwjs"repo="uiw"><Github.Analysistype="languages-top"/><Github.Analysistype="search"query="github"/></Github></>);}

Coverage.Coverages

importReactfrom'react';importCoveragefrom'@uiw/react-shields/coverage';exportdefaultfunctionDemo(){return(<><Coverage.Coveragesuser="jaywcjlove"repo="hotkeys"href="https://github.com/uiwjs/uiw/issues"/><Coverageuser="jaywcjlove"repo="hotkeys"><Coverage.Coveragestype="github"/><Coverage.Coveragestype="github"/></Coverage></>);}

Coverage.Codacy

importReactfrom'react';importCoveragefrom'@uiw/react-shields/coverage';exportdefaultfunctionDemo(){return(<><Coverage.CodacyprojectId="1c524e61cd8640e79b80d406eda8754b"href="https://github.com/uiwjs/uiw/issues"/><Coverageuser="jaywcjlove"repo="hotkeys"><Coverage.CodacyprojectId="1c524e61cd8640e79b80d406eda8754b"branch="master"/><Coverage.CodacyprojectId="1c524e61cd8640e79b80d406eda8754b"/></Coverage></>);}

Development

# Step 1, run first, listen to the component compile and output the .js file# listen for compilation output type .d.ts filenpm run watch# Step 2, development mode, listen to compile preview website instancenpm run start

npm run build

Contributors

License