react-shields

Shields.io: Quality metadata badges open source projects for react component.

Install

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

Usage

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

import React from 'react';
import Github from '@uiw/react-shields/github';

export default function Demo() {
  return (
    <>
      <Github.Issues user="uiwjs" repo="uiw" />
      <Github user="uiwjs" repo="uiw">
        <Github.Issues href="https://github.com/uiwjs/uiw" type="issues" />
        <Github.Issues type="issues-raw" />
        <Github.Issues type="issues-closed" />
      </Github>
      <Github.Size user="uiwjs" repo="uiw" />
      <Github user="uiwjs" repo="uiw">
        <Github.Size />
        <Github.Size type="repo-size" />
        <Github.Size type="size" />
      </Github>
    </>
  );
}

Github.Social

import React from 'react';
import Github from '@uiw/react-shields/github';

export default function Demo() {
  return (
    <>
      <Github.Social user="jaywcjlove" repo="uiw" href="https://github.com/jaywcjlove" />
      <Github user="jaywcjlove" repo="awesome-mac">
        <Github.Social type="forks" />
        <Github.Social type="stars" />
        <Github.Social type="watchers" />
        <Github.Social type="followers" />
      </Github>
    </>
  );
}

Npm.Version

import React from 'react';
import Npm from '@uiw/react-shields/npm';

export default function Demo() {
  return (
    <>
      <Npm.Version scope="@uiw" packageName="react-shields" href="https://npmjs.com/@uiw/react-shields" />
      <Npm>
        <Npm.Version scope="@uiw" packageName="react-github-corners" />
        <Npm.Version packageName="hotkeys-js" />
        <Npm.Version packageName="kkt" version="latest" />
        <Npm.Version packageName="tsbb" />
        <Npm.Version
          scope="@uiw"
          type="peer-dependency"
          dependency="react"
          packageName="react-github-corners"
        />
      </Npm>
    </>
  );
}

Npm.Size

import React from 'react';
import Npm from '@uiw/react-shields/npm';

export default function Demo() {
  return (
    <>
      <Npm.Size scope="@uiw" packageName="react-shields" href="https://npmjs.com/@uiw/react-shields" />
      <Npm>
        <Npm.Size format="minzip" scope="@uiw" packageName="react-github-corners" />
        <Npm.Size packageName="hotkeys-js" />
        <Npm.Size packageName="kkt" version="latest" />
      </Npm>
    </>
  );
}

import React from 'react';
import Npm from '@uiw/react-shields/npm';

export default function Demo() {
  const [scope, setScope] = React.useState('@uiw');
  const [packageName, setPackageName] = React.useState('react-shields');
  return (
    <>
      <Npm.Size scope={scope} packageName={packageName} />
      <div>
        <button onClick={() => setPackageName('react-shields')}>react-shields</button>
        <button onClick={() => setPackageName('react-codemirror')}>react-codemirror</button>
      </div>
    </>
  );
}

Npm.Downloads

import React from 'react';
import Npm from '@uiw/react-shields/npm';

export default function Demo() {
  return (
    <>
      <Npm.Downloads scope="@uiw" packageName="react-shields" href="https://npmjs.com/@uiw/react-shields" />
      <Npm>
        <Npm.Downloads interval="dw" scope="@uiw" packageName="react-github-corners" />
        <Npm.Downloads packageName="hotkeys-js" />
      </Npm>
    </>
  );
}

Github.Issues

import React from 'react';
import Github from '@uiw/react-shields/github';

export default function Demo() {
  return (
    <>
      <Github.Issues user="uiwjs" repo="uiw" href="https://github.com/uiwjs/react-shields/issues" />
      <Github user="uiwjs" repo="uiw">
        <Github.Issues type="issues" href="https://github.com/uiwjs/react-shields/issues" />
        <Github.Issues type="issues-raw" />
        <Github.Issues type="issues-closed" />
        <Github.Issues type="issues-closed-raw" />
        <Github.Issues type="issues-pr" />
        <Github.Issues type="issues-pr-raw" />
        <Github.Issues type="issues-pr-closed" />
        <Github.Issues type="issues-pr-closed-raw" />
        <Github.Issues type="issues" label="bug" />
        <Github.Issues type="issues-raw" label="bug" />
        <Github.Issues type="issues-pr" label="bug" />
        <Github.Issues type="issues-pr-raw" label="bug" />
      </Github>
    </>
  );
}

Github.Size

import React from 'react';
import Github from '@uiw/react-shields/github';

export default function Demo() {
  return (
    <>
      <Github.Size user="uiwjs" repo="uiw" />
      <Github user="uiwjs" repo="uiw">
        <Github.Size />
        <Github.Size type="repo-size" />
        <Github.Size type="size" />
      </Github>
    </>
  );
}

Github.Downloads

import React from 'react';
import Github from '@uiw/react-shields/github';

export default function Demo() {
  return (
    <>
      <Github.Downloads user="uiwjs" repo="uiw" href="https://github.com/uiwjs/uiw/issues" />
      <Github user="uiwjs" repo="uiw">
        <Github.Downloads />
        <Github.Downloads total={false}/>
        <Github.Downloads type="downloads-pre" />
        <Github.Downloads total={false} tag="v3.9.0"/>
        <Github.Downloads tag="v3.9.0"/>
      </Github>
    </>
  );
}

Github.Version

import React from 'react';
import Github from '@uiw/react-shields/github';

export default function Demo() {
  return (
    <>
      <Github.Version user="uiwjs" repo="uiw" href="https://github.com/uiwjs/uiw/issues" />
      <Github user="uiwjs" repo="uiw">
        <Github.Version type="version-tag" href="https://github.com/uiwjs/uiw/issues" />
        <Github.Version type="package-json" />
        <Github.Version type="package-json" branch="dev" />
        <Github.Version user="jaywcjlove" repo="wxmp" type="manifest-json" />
        <Github.Version user="jaywcjlove" repo="wxmp" type="manifest-json" branch="master" />
        <Github.Version user="x-mod" repo="routine" type="go-mod" />
        <Github.Version user="x-mod" repo="routine" type="go-mod" branch="master" />
      </Github>
    </>
  );
}

Github.License

import React from 'react';
import Github from '@uiw/react-shields/github';

export default function Demo() {
  return (
    <>
      <Github.License user="uiwjs" repo="uiw" href="https://github.com/uiwjs/uiw/blob/master/LICENSE" />
      <Github user="uiwjs" repo="uiw">
        <Github.License />
      </Github>
    </>
  );
}

Github.Analysis

import React from 'react';
import Github from '@uiw/react-shields/github';

export default function Demo() {
  return (
    <>
      <Github.Analysis user="uiwjs" repo="uiw" href="https://github.com/uiwjs/uiw/issues" />
      <Github user="uiwjs" repo="uiw">
        <Github.Analysis type="languages-top" />
        <Github.Analysis type="search" query="github" />
      </Github>
    </>
  );
}

Coverage.Coverages

import React from 'react';
import Coverage from '@uiw/react-shields/coverage';

export default function Demo() {
  return (
    <>
      <Coverage.Coverages user="jaywcjlove" repo="hotkeys" href="https://github.com/uiwjs/uiw/issues" />
      <Coverage user="jaywcjlove" repo="hotkeys">
        <Coverage.Coverages type="github"  />
        <Coverage.Coverages type="github" />
      </Coverage>
    </>
  );
}

Coverage.Codacy

import React from 'react';
import Coverage from '@uiw/react-shields/coverage';

export default function Demo() {
  return (
    <>
      <Coverage.Codacy projectId="1c524e61cd8640e79b80d406eda8754b" href="https://github.com/uiwjs/uiw/issues" />
      <Coverage user="jaywcjlove" repo="hotkeys">
        <Coverage.Codacy projectId="1c524e61cd8640e79b80d406eda8754b" branch="master" />
        <Coverage.Codacy projectId="1c524e61cd8640e79b80d406eda8754b" />
      </Coverage>
    </>
  );
}

Development

Runs the project in development mode.

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

production

Builds the app for production to the build folder.

npm run build

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.